「Virtual Earth Map Control 6.0」による地図操作
第1回　「Virtual Earth Map Control」で地図上ツールをON/OFF!
第2回　地図上の情報を取得してみよう - Virtual Earth Map Controlの使い方
第3回　スクリプトで地図を動かしてみよう(前編) - 地図の移動と検索

前回は、スクリプトで地図の中心点を移動したり、検索アプリケーションを構築してみた。今回は、スクリプトで地図を拡大/縮小させたり、航空写真や3D表示などに切り替えたりしてみよう。

JavaScriptで地図を拡大/縮小するには

まず、マウスで地図を拡大/縮小する方法を確認しよう。

画面上に第1回で紹介した地図コントロールが表示されている場合は、マウスでルーペのアイコンをクリックして地図のズームを調整できる。地図コントロールが表示されていなくても、地図上でダブルクリックすればその地点を中心に拡大させることができる。逆に縮小する場合はCtrlキーを押しながらダブルクリックすればよい。

では、スクリプトでズームを設定するにはどうすればよいだろうか。

スクリプトでズームを設定するメソッドとして、以下が用意されている。引数のズームレベルは1から19までで、数字が大きくなるほど拡大される。

  • VEMap.SetZoomLevel( ズームレベル )
    ズームレベルの設定
  • VEMap.ZoomIn()
    ズームレベルを1増やす(地図を拡大)
  • VEMap.ZoomOut()
    ズームレベルを1減らす(地図を縮小)
  • VEMap.SetCenterAndZoom( VELatLongよる中心点の位置, ズームレベル )
    第3回参照

ズームレベルの目安を図1～図4に示すので、参考にしていただきたい。これらはリスト1によって表示させている。

【図1】ズームレベル : 1 (世界全体)

【図2】ズームレベル : 5(北海道～九州)

【図3】ズームレベル : 10(東京都)

【図4】ズームレベル : 18(秋葉原駅周辺)

リスト1 ボタンによる地図の拡大/縮小(上:JavaScript抜粋、下:HTML抜粋)

var label  = document.getElementById( 'label' );  
var mapDiv = document.getElementById( 've-map' );
var veMap = new VEMap( 've-map' );
veMap.HideDashboard();
veMap.AttachEvent( 'onchangeview', function( e )  {
  label.innerHTML = veMap.GetZoomLevel();
} );
veMap.LoadMap();
veMap.SetZoomLevel( 1 );  // ズームレベルの設定
<div>
  <button onclick="veMap.ZoomIn();">拡大</button>
  <button onclick="veMap.ZoomOut();">縮小</button>
  ズームレベル : <span id="label"></span>
</div>