製品版のみの機能
マップ - マップのツールチップ
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、マップ コントロールでマップ ツールチップを設定し、ビュー モデルをコントロールにバインドする方法を紹介します。世界の都市の位置は、サーバー側にマップ コントロールの地理記号シリーズにバインドされるオブジェクトのリストで保存されます。都市名、国名、地理座標を表示するツールチップ テンプレートがシリーズに割り当てられ、マウス ポインターがマップで都市マーカーの上にホバーしたときに表示されます。データへズーム インするには、マウス スクロール ホイールを使用します。タッチ デバイスでは、縮小ジェスチャを使用します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.dv.js"></script>
<style>
#customTable
{
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#customTable td, #customTable th
{
font-size: 9px;
border: 1px solid #4377e1;
padding: 3px 7px 2px 7px;
}
#customTable th
{
font-weight: bold;
font-size: 11px;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #4377e1;
color: #ffffff;
}
</style>
</head>
<body>
<script src="/data-files/world-cities.js"></script>
<script id="customTooltip" type="text/x-jquery-tmpl">
<table id="customTable" >
<tr><th colspan="2">${item.Name}, ${item.Country}</th></tr>
<tr>
<td>緯度:</td>
<td>${item.Latitude}</td>
</tr>
<tr>
<td>経度:</td>
<td>${item.Longitude}</td>
</tr>
</table>
</script>
<script type="text/javascript">
$(function () {
$("#map").igMap({
width: "700px",
height: "500px",
windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
backgroundContent: {
type: "openStreet"
},
series: [{
type: "geographicSymbol",
name: "worldCities",
dataSource: data,
latitudeMemberPath: "Latitude",
longitudeMemberPath: "Longitude",
markerType: "automatic",
markerCollisionAvoidance: "fade",
markerOutline: "#1142a6",
markerBrush: "#7197e5",
showTooltip: true,
tooltipTemplate: "customTooltip"
}]
});
$("#map").find(".ui-widget-content").append("<span class='copyright-notice'><a href='http://www.openstreetmap.org/copyright'>© OpenStreetMap contributors</a></span>");
});
</script>
<div>
<div id="map"></div>
</div>
</body>
</html>
var data = [
{ Name: "ワルシャワ", Country: "ポーランド", Latitude: 52.21, Longitude: 21 },
{ Name: "ロンドン", Country: "英国", Latitude: 51.50, Longitude: 0.12 },
{ Name: "ベルリン", Country: "ドイツ", Latitude: 52.50, Longitude: 13.33 },
{ Name: "モスコワ", Country: "ロシア", Latitude: 55.75, Longitude: 37.51 },
{ Name: "シドニー", Country: "オーストラリア", Latitude: -33.83, Longitude: 151.2 },
{ Name: "東京", Country: "日本", Latitude: 35.6895, Longitude: 139.6917 },
{ Name: "ソウル", Country: "韓国", Latitude: 37.5665, Longitude: 126.9780 },
{ Name: "デリー", Country: "インド", Latitude: 28.6353, Longitude: 77.2250 },
{ Name: "ムンバイ", Country: "インド", Latitude: 19.0177, Longitude: 72.8562 },
{ Name: "マニラ", Country: "フィリピン", Latitude: 14.6010, Longitude: 120.9762 },
{ Name: "上海", Country: "中国", Latitude: 31.2244, Longitude: 121.4759 },
{ Name: "メキシコ シティー", Country: "メキシコ", Latitude: 19.4270, Longitude: -99.1276 },
{ Name: "ニュー ヨーク", Country: "合衆国", Latitude: 40.7561, Longitude: -73.9870 },
{ Name: "サンパウロ", Country: "ブラジル", Latitude: -23.5489, Longitude: -46.6388 },
{ Name: "ロサンゼルス", Country: "合衆国", Latitude: 34.0522, Longitude: -118.2434 },
{ Name: "ソフィア", Country: "ブルガリア", Latitude: 42.697845, Longitude: 23.321925 }
];