The Virtual Earth Interactive SDKとVirtual Earth Map Control 5.0の紹介

Artykuł
10/04/2007

現在取り組んでいるSilverlightのプロジェクトでVirtual Earthとの連携を組み込もうと考えて、資料を探していたところ、なんとも便利なサイトがあることに気がついて、やりたいことはあっという間に片付いてしまいました。

Virtual Earth Interactive SDK
https://dev.live.com/virtualearth/sdk/

このサイトを見ると、Virtual Earthを使ったWebアプリケーションを作る上での基礎的なことが実際の動きとコード、詳細なリファレンスとともに確認できます。英語のドキュメントですが、コードは簡単なので、すぐに学べると思います。

たとえば、マイクロソフト株式会社の本社近くの地図は、次のようなHTMLとJavaScriptで表示できます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://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 src="https://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=5"></script>
      <script>
         var map = null;

         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap(new VELatLong(35.68658, 139.700827), 15 ,'h' ,true);
         }
      </script>
   </head>
   <body onload="GetMap();">
      <div id='myMap' style="position:relative; width:640px; height:480px;"></div>
   </body>
</html>

地図を表示するためのコントロールは、Virtual Earth Map Controlとよばれ、現在バージョン5.0が提供されています。

コントロールを利用するために、HTML文書に下記の内容を加えれば、準備が整います。

このコントロールに関するドキュメントは、すでに日本語化されており、下記のURLからご覧いただけます。

https://msdn2.microsoft.com/ja-jp/library/bb429619.aspx

上述のHTMLを実行すると動かせない地図が表示されますが、それは、下記のLoadMapメソッド呼び出しの最後のパラメータで指定しています。

map.LoadMap(new VELatLong(35.68658, 139.700827), 15 ,'h' ,true);

VELatLongクラスは、緯度(Latitude)と経度(Longitude)をひとまとめにするためのものです。この指定で表示位置を変えられます。
上記のHTMLには記載していませんが、PanToLatLong()メソッドやSetCenterAndZoom()メソッドなどを利用することで、何らかのイベントに応じて、地図の表示を変えられます。

皆さんもお試しください。

Udostępnij za pośrednictwem

The Virtual Earth Interactive SDKとVirtual Earth Map Control 5.0の紹介

Dodatkowe zasoby