製品版のみの機能
マップ - Bing Maps
このサンプルでは、マップ コントロールで背景コンテンツとして Bing Maps からの画像タイルを使用する方法を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このサンプルでは、マップ コントロールで背景コンテンツとして Bing Maps からの画像タイルを使用する方法を紹介します。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<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>
#tooltipTable
{
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 100%;
border-collapse: collapse;
}
#tooltipTable td, #tooltipTable th
{
font-size: 9px;
border: 1px solid #269bc9;
padding: 3px 7px 2px 7px;
}
#tooltipTable th
{
font-weight: bold;
font-size: 11px;
text-align: left;
padding-top: 5px;
padding-bottom: 4px;
background-color: #269bc9;
color: #ffffff;
}
</style>
</head>
<body>
<!-- Target element for the map -->
<div id="map"></div>
<script src="/js/map-helper.js" type="text/javascript" ></script>
<script src="/data-files/world-cities.js"></script>
<script>
$(function () {
$("#map").igMap({
width: "700px",
height: "500px",
windowRect: { left: 0.1, top: 0.1, height: 0.7, width: 0.7 },
// specifies imagery tiles from BingMaps
backgroundContent: {
type: "bing",
key: mapHelper.bingData(),
imagerySet: "AerialWithLabels", // alternative: "Road" | "Aerial",
bingUrl: "https://dev.virtualearth.net/REST/v1/Imagery/Metadata/"
},
series: [{
type: "geographicSymbol",
name: "worldCities",
dataSource: data,
latitudeMemberPath: "Latitude",
longitudeMemberPath: "Longitude",
markerType: "automatic",
markerCollisionAvoidance: "fade",
markerOutline: "#269bc9",
markerBrush: "#269bc9",
showTooltip: true,
tooltipTemplate: "tooltipTemplate"
}],
});
});
</script>
<script id="tooltipTemplate" type="text/x-jquery-tmpl">
<table id="tooltipTable" >
<tr><th class="tooltipHeading" 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>
</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 }
];