マップの表示
Virtual Earth のマップ コントロールを使用する際の第一歩は、作成した Web サイトにマップを表示することです。
既定マップの表示
すべてのナビゲーション機能を備えた既定マップは、次の手順で表示できます。
HTML ページの先頭に、次の DOCTYPE 宣言を追加します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">HTML ページのヘッダー セクションに、charset 属性を "utf-8" に設定した META 要素を追加します。次に例を示します。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">注意
ページのエンコーディングを UTF-8 に設定しないと、一部のマップ要素を描画できません。
ヘッダー セクションには、マップ コントロールへの参照も追加します。次に例を示します。
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"> </script>ページの本文に、マップを挿入するための DIV 要素を追加します。マップのサイズは、DIV 要素の高さおよび幅として定義します。マップの位置は、"position"、"top"、および "left" プロパティを使用して設定します。これらの値は、インラインで設定することも、スタイル クラス内で値を定義してそのクラスを参照することもできます。次に例を示します。
<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>または
.map { position:absolute; top: 20; left: 10; width:400px; height:400px; border:#555555 2px solid; } ... <div id="map" class="map"></div>注意
幅を指定しない場合は、既定の幅 600 ピクセルが使用されます。既定の高さは 400 ピクセルです。クロスブラウザ互換性を維持するため、必ず位置属性 "absolute" および "relative" の両方に有効な値を指定するようにしてください。マップの挿入先の DIV で幅または高さを指定するパーセント値を使用する場合、それぞれ親要素の幅または高さに対するパーセント値になります。
VEMap クラスの新しいインスタンスを作成し、VEMap.LoadMap メソッドを呼び出します。次に例を示します。
var map = new VEMap('myMap'); map.LoadMap();注意
ほとんどの場合、VEMap のメソッドを呼び出したり VEMap のプロパティにアクセスしたりするには、その前に LoadMap メソッドを呼び出す必要があります。例外は以下のメンバーです。これらのメンバーの呼び出しは、新しい VEMap オブジェクトを作成した後、そのオブジェクトの LoadMap メソッドを呼び出す前に行う必要があります。
読み込み時のマップのカスタマイズ
マップの位置、ズーム レベル、およびマップ スタイルは、マップを初めて読み込むときに指定することもできます。その場合は、以下のように、VEMap.LoadMap メソッド (オーバーロード) を使用して、位置、ズーム レベル、マップ スタイル、マップのロックの要否、マップ モード、マップ モード切替ボタンの表示/非表示、およびマップの周囲に読み込むタイル バッファの量を渡します。
var map = new VEMap('myMap');
map.LoadMap(new VELatLong(47.6, -122.33, 0, VEAltitudeMode.RelativeToGround), 10, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
例
マップを表示するために必要なすべての要素を含めると、最終的な Web ページは次のようになります。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1"></script>
<script type="text/javascript">
var map = null;
var LA = new VELatLong(34.0540, -118.2370);
var pinPoint = null;
var pinPixel = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
AddPin();
}
function getInfo()
{
var info;
if (map.IsBirdseyeAvailable())
{
var be = map.GetBirdseyeScene();
info = "ID:" + be.GetID() + "\n";
info += "方向:" + be.GetOrientation()+ "\n";
info += "高さ:" + be.GetHeight() + "\n";
info += "幅:" + be.GetWidth() + "\n";
var pixel = be.LatLongToPixel(map.GetCenter(), map.GetZoomLevel());
info += "LatLongToPixel:" + pixel.x + ", " + pixel.y + "\n";
// 現在の概観図ビューにプッシュピンのピクセル ポイントが含まれているかどうかをチェックします。
info += "ピクセル " + pinPixel.x + ", " + pinPixel.y + " を含む: " +
be.ContainsPixel(pinPixel.x, pinPixel.y, map.GetZoomLevel()) + "\n";
// 現在のビューにプッシュピンの LatLong が含まれているかどうかをチェックします。
info += "latlong " + pinPoint + " を含む:" + be.ContainsLatLong(pinPoint) + "\n";
// 選択したビューやマップ スタイルによっては、このメソッドによって null が返される場合があります。
info += "latlong:" + map.PixelToLatLong(pixel);
alert(info);
}
else
{
var center = map.GetCenter();
info = "ズーム レベル:\t" + map.GetZoomLevel() + "\n";
info += "緯度:\t" + center.Latitude + "\n";
info += "経度:\t" + center.Longitude;
alert(info);
}
}
function AddPin()
{
// マップの中央に新しいプッシュピンを追加します。
pinPoint = map.GetCenter();
pinPixel = map.LatLongToPixel(pinPoint);
map.AddPushpin(pinPoint);
}
</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<input id="btnGetInfo" type="button" value="シーン情報を取得" name="getinfo" onclick="getInfo();">
<br />
(緯度/経度とズーム レベルを取得するには、縮小ボタンを 5 回クリックしてください)
</body>
</html>