使ってみよう! Bing API/SDK

第28回 最新機能をチェック! Bing Maps AJAX Control

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

はじめに

今回はJavaScriptライブラリーで提供されている地図コントロール,Bing Maps AJAX Controlの新しい機能を紹介します。前回の冒頭でも少しふれていますが,今月にアップデートがあり,新しい機能が追加されています。Bing Maps AJAX Controlの基本的な使い方や機能については連載の第1318回でも紹介していますので,そちらも併せて参照してください。

また,Bingの地図サービス自体のアップデートが前回から今回の間にあり,道路地図の見た目の改善(主に米国のみ)や,地図コントロールのUIの更新などが行われています図1図2)⁠このUIの変更は,AJAX Controlには反映されていません。

図1 従来のUI

図1 従来のUI

図2 新しいUI

図2 新しいUI

さて,Bing Maps AJAX Controlの追加された大きな機能は次の3種類です。

  • ルート検索(経路検索)および表示図3
  • 交通情報の表示図4
  • ショッピングモールなどの地図表示と情報の取得

図3 ルート検索

図3 ルート検索

図4 交通情報の表示

図4 交通情報の表示

以上の機能は追加モジュールとして参照し使用します。今回はこれらの機能を順番に紹介します。

モジュールの登録とロード

最初に,モジュールの登録とロードについて紹介します。Bing Maps AJAX Controlでは,独自のスクリプトをモジュールとして登録し,必要になった時点でロードする機能があります。今回紹介する3種類の機能もモジュールとしてロードして使います。モジュールに必要なCSSファイルも併せてロードできます。

モジュールの作成

さっそく使ってみましょう。モジュールとして登録するスクリプトを作成します。内容はなんでも構いませんが,スクリプトの最後にMicrosoft.MapsクラスのmoduleLoadedメソッドにモジュールのキー名を渡して終わります。

MyModule.js

function MyModule(map) {
    this.drawCircle = function(location, meters) {
        // (省略)
    }
}
Microsoft.Maps.moduleLoaded("GihyoSample.MyModule");

スクリプトで使用する関数や,モジュールのキー名はアプリ内で一意になるような任意の名前を設定します。

モジュールの登録

モジュールを作成した次は,アプリから利用しましょう。まず,利用するモジュールをMicrosoft.Maps.registerModuleメソッドで登録します。

Microsoft.Maps.registerModule(
    "GihyoSample.MyModule",
    "http://example.jp/MyModule.js");

registerModuleメソッドの引数は,モジュールのキー名,モジュールのURLです。

オプションとして,モジュールのロード時に併せてロードするCSSファイルがあれば次のように指定できます。

Microsoft.Maps.registerModule(
    "GihyoSample.MyModule", 
    "http://example.jp/MyModule.js",
    {styleUrls: ["http://example.jp/MyModule.css"]});

モジュールのロード

最後にモジュールのロードです。モジュールを使用するときは,Microsoft.Maps.loadModuleメソッドで登録したモジュールをロードします。

Microsoft.Maps.loadModule(
    "GihyoSample.MyModule",
    {callback: moduleLoaded});

モジュールのロードが完了すると,第2引数で指定した関数が呼ばれます。

サンプル

以上をまとめたサンプルを示します。次のコード中では,MyModule.jsをモジュールとして登録し,すぐにロードしています。モジュールのコードは省略しますが,地図上に円を描画するコードになっています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Module Sample</title>
        <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;mkt=ja-jp"></script>
        <script type="text/javascript">
            var map = null;
    
            function ModuleLoaded()
            {
                var loc = new Microsoft.Maps.Location(35.55, 139.7862);
                map.setView({center: loc, zoom: 12});

                // モジュールの利用
                var module = new MyModule(map);
                module.drawCircle(loc, 5000);
            }
    
            function GetMap()
            {
                // 地図の表示
                var options = {credentials: "BingMapsKey"};
                map = new Microsoft.Maps.Map(document.getElementById("map"), options);
    
                // モジュールの登録とロード
                Microsoft.Maps.registerModule("GihyoSample.MyModule", "MyModule.js");
                Microsoft.Maps.loadModule("GihyoSample.MyModule", {callback: ModuleLoaded});
            }
        </script>    
    </head>
    <body onload="GetMap();">
      <div id="map" style="position:relative;width:512px;height:512px;"></div>
    </body>
</html>

実行結果は図5のようになります。

図5 モジュールの登録とロード

図5 モジュールの登録とロード

著者プロフィール

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

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

URL:http://katamari.jp

コメント

コメントの記入