使ってみよう! Windows Live SDK/API

第4回 Virtual Earth

この記事を読むのに必要な時間:およそ 4 分

Virtual Earth

Virtual Earthはオンラインの地図サービスを提供するプラットフォームです。これによりユーザへ住所や店名による検索,航空写真の表示などの提供が可能になります。Birds eye(概観図)と呼ばれる低角度で撮影された航空写真の表示が特長のひとつとなっています(日本で対応した場所は今のところありませんが)。身近なところではLive Search Mapsに使用されており,Virtual Earthを体験することができます。

開発者向けにはVirtual Earth Map Control SDKというAPI群が提供されており,簡単にVirtual Earthを利用したWebベースのアプリケーションの作成が可能です※1)。今回はこのSDK・APIを利用した基本的なVirtual Earthの操作方法を紹介します。

開発環境

Virtual Earth Map ControlはJavaScriptのライブラリとして提供されています。そのためメモ帳さえあればコードの記述は可能です。ですが,Visual Studio 2008からJavaScript(正確にはJScript)のインテリセンス機能※2が使用できるようになっています。入力が補完され便利ですので使用してみるとよいでしょう。Visual Web Developer 2008 Express Editionでも使えます。

JScriptのインテリセンス機能はJscriptのコードをある程度理解してくれますが,Virtual Earth Map Controlのライブラリについては機能が働きません。そこでインテリセンスを機能させるためのVirtual Earth用のライブラリが公開されていますので,併せて使用しましょう。

Virtual Earth JavaScript Intellisense HelperのReleasesページよりダウンロードできます。ダウンロードしたファイル内のVEJSフォルダ以下のファイルが使用するjsファイル群になります。インテリセンス機能のみに使用するファイルですので,インテリセンスを有効にしたいjsファイル内から参照ディレクティブを使ってVeJavaScriptIntellisenseHelper.jsを相対パスで指定します。参照ディレクティブは次のように記述します。

/// <reference path="VEJS/VeJavaScriptIntellisenseHelper.js" />

ダウンロードしたファイルにあるDefault.aspx.jsを使用して確認するとよいでしょう図1)。

図1 Virtual Earth JavaScript Intellisense Helperによるインテリセンス

図1 Virtual Earth JavaScript Intellisense Helperによるインテリセンス

マップの表示

まずは基本となるマップの表示からです。HTMLファイルを作成し,先頭に以下のDOCTYPE宣言を記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

次にheadタグ内に使用する文字セットを指定します。Virtual EarthではUTF-8を使用する必要があります。また,Virtual Earth Map Controlを外部jsファイルとして参照します。Virtual Earthを操作するJavaScriptのコードを外部ファイルとして記述する場合はjsファイルを新しく作成し同様にこの場所に追加しておきます。

<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&amp;mkt=ja-jp"></script>

マップを表示するためのdivタグをbodyタグ内に追加します。正しく表示するためにはstyle属性のpositionをabsoluteまたはrelativeに設定しておく必要があります。また,width・heightの値がマップの大きさになります。

<div id='myMap' style="position:absolute; width:400px; height:400px;"></div>

マップを表示するにはVEMapクラスのインスタンスを生成しLoadMapメソッドを呼びます。以下のように関数を作り,bodyタグのonloadイベントから呼ぶようにします。VEMapクラスのコンストラクタにはマップを表示するdivタグに指定したid属性の値を渡します。

var map = null;
function pageLoaded() {
    map = new VEMap("myMap");
    map.LoadMap();
}
<body onload="pageLoaded();">

作成したHTMLファイルを開いてみましょう。図2のようにマップが表示されると思います。

図2 マップの表示

図2 マップの表示
※1
執筆時点のMap Control SDKのバージョンは6.0です。また利用規約を確認してください。
※2
詳しくはJScript IntelliSenseの概要を参照してください。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp

コメント

コメントの記入