特集
» 2007年02月15日 08時00分 公開

Windows Liveが魅せる次世代マッシュアップ:地図とオンラインOSの関係(前編) (3/5)

[大澤文孝,ITmedia]

 この地図は、http://maps.live.com/で提供されているものと、まったく同じだ。

 このため、マウスでドラッグしてスクロールしたり、表示されているナビゲーションコントロールを使って移動や拡大/縮小をするなど、航空写真や3D表示に切り替えるといった操作も可能だ。

画面1■リスト1の実行結果

JavaScriptから地図の中央位置を設定する

 画面1を見ると分かるように、表示される地図の標準位置は米国であり、日本人が使うには適した初期表示とは言えないだろう。そこでまずは、地図の位置を設定してみよう。

 地図の中央位置は、SetCenterメソッドで指定できる。またSetCenterAndZoomメソッドを使うと、中央位置と拡大率を合わせて設定することもできるのだ。

 Virtual Earthでは、位置情報をVELatLongオブジェクトとして表現している。VELatLongオブジェクトは、「緯度」「経度」で場所を示すものだ。

 例えば、緯度35.6811度、経度139.76709度を示す場合には、次のように表現すればよい。


var lat = new VELatLong(35.6811, 139.76709);

 ここで例示した「緯度35.6811度、経度139.76709度」は、「東京駅」だ。

 この緯度/経度の値は、http://maps.live.com/で「東京駅」を検索することによって調べた。また、検索したときに[共有]メニューから[固定リンクの表示]をクリックすると、現在中央に表示されている位置情報を示すURLが表示される(画面2)

画面2■東京駅を検索したところ

 「東京駅」を検索したときは、次のようなURLで示された。


http://maps.live.com/default.aspx?v=2&cp=35.681126~139.767058&style=r&lvl=16&tilt=-90&dir=0&alt=-1000&sp=Point.pyd4y6wndhy2_%u6771%u4eac%u99c5%uff08%uff2a%uff32%u3001%u6771%u4eac%u5730%u4e0b%u9244%uff09___

 この「cp=35.681126~139.767058」の部分が、該当の緯度/経度となる。さて、VELatLongオブジェクトを作成したら、SetCenterAndZoomメソッドを呼び出して中央位置を指定する。拡大率は1〜19までを指定できる。該当するのは、次の個所だ。


map.SetCenterAndZoom(lat, 15);

 以上をまとめ、リスト1に示した初期化コードをリスト2のように変更すると、次の画面3に示すように、東京駅周辺の地図が表示されるのだ。

Copyright © ITmedia, Inc. All Rights Reserved.

注目のテーマ

マーケット解説

- PR -