「Virtual Earth Map Control 6.0」による地図操作
第1回 「Virtual Earth Map Control」で地図上ツールをON/OFF!
第2回 地図上の情報を取得してみよう - Virtual Earth Map Controlの使い方

前の2回で、Virtual Earth Map Control 6.0を使って地図上のコントロールを操作したり、地図から情報を取得したりした。今回はJavaScriptを用いて地図を動かしてみよう。そしてそれを応用した地図検索アプリケーションも作成してみたい。

JavaScriptで地図を動かすには

第1回で紹介したLive Search Maps BetaやGoogle Mapsなど、Webブラウザ上に地図が表示されるサービスでは、その地図で表示される場所を動かす際に、動かしたい方向の矢印型アイコンをクリックしたり、マウスで地図をドラッグするのが一般的だ。

しかし地図検索サイトでは、検索が終わると、検索された地点とその周辺が表示されるように地図が移動する。ということは、プログラミングによってどの位置の地図を表示させるかを決められるはずだ。

前回紹介したVEMapクラスで地図を動かすには、以下の方法がある。

  • VEMap.SetCenter(VELatLongオブジェクト)
    表示する地図の中心点となる緯度と経度を指定する
  • VEMap.SetCenterAndZoom(VELatLongオブジェクト, ズームレベル)
    表示する地図の中心点をVELatLongオブジェクトによる位置とし、指定されたズームレベル(1から19、数字が大きいほうが拡大)でズームする
  • VEMap.Pan(X軸の距離、Y軸の距離)
    動かす距離をX軸,Y軸(ピクセル単位)で指定する
  • VEMap.PanToLatLong(VELatLongオブジェクト)
    指定した緯度、経度まで地図を動かす

SetCenter()とPanToLatLong()とは、結果として同じ場所が表示されるが、直接その場所を表示するのか、地図を少しずつ移動させるのかが異なる。とはいえ、SetCenter()による指定でも、すでに表示されている場所を中心点にする場合はPanToLatLong()と同じように地図が少しずつ移動する。

引数のVELatLongオブジェクトは、緯度(Latitude)、経度(Longitude)のほか、3D表示で用いる高度(Altitude)といった情報をもち、前述のとおり地図表示の中心点を決めたり、他にはピクセル単位のX,Y座標との相互変換を行う際に用いられる。