使ってみよう! Bing API/SDK

第14回 使ってみよう! Bing Maps AJAX Control──地図をWebページに貼り付け(2)

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

はじめに

Webページに地図を貼り付けられるBing Maps AJAX Controlの2回目です。今回は地図上にプッシュピン図1や図形を表示してみましょう。

図1 プッシュピン

図1 プッシュピン

Bing Maps AJAX Controlを利用すると地図上にプッシュピンの表示や,線や領域の描画などが可能です。多機能ではありませんが,簡単に使えます。

プッシュピン

最初は,プッシュピンを地図に追加してみましょう。プッシュピンを追加するコードを記述した,Webページ全体のHTMLファイルの内容を示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
    <title>Sample</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=ja-jp"></script>
    <script type="text/javascript">

        function GetMap() {
            // Map オブジェクトの生成
            var options = {
                credentials: "BingMapsKey",
                center: new Microsoft.Maps.Location(35.694058, 139.728563),
                zoom: 18}

            var map = new Microsoft.Maps.Map(document.getElementById("map"), options);

            // Location オブジェクトの生成(プッシュピンを表示する経緯度に設定)
            var location = new Microsoft.Maps.Location(35.69406262352407, 139.72832623668495);

            // Pushpin オブジェクトの生成
            var pin = new Microsoft.Maps.Pushpin(location, { text: 'H' });

            // 地図へプッシュピンを追加
            map.entities.push(pin);
        }

    </script>
    </head>
    <body onload="GetMap();">
        <div id='map' style="position:relative; width:500px; height:500px;"></div>
    </body>
</html>

BingMapsKeyの部分は,Bing Maps Keyに置き換えてください。このWebページを表示した結果は図2の通りです。

図2 実行結果 プッシュピン

図2 実行結果 プッシュピン

図では建物の屋上を指し示しているようかに見えますが,高度を指定しているわけではないので実際は地表を指しています。道路地図や概観図の別角度で見るとわかります。

プッシュピンはPushpinクラスで表します。Pushpinオブジェクトの生成時に経緯度Locationオブジェクト)とオプションを指定します。そして,Mapクラスにあるコレクション型のentitiesプロパティにPushpinオブジェクトを追加することで,地図上に表示します。プッシュピンやこの後に紹介するポリラインなどはすべて,Mapクラスのentitiesプロパティにオブジェクトを追加することで,そのオブジェクトを地図上に表示します。

オプションは,上記のコードのようにキーと値のペアを中括弧で括ったJSONのデータ形式を用います。Mapオブジェクトの生成時にも同形式のオプションを作成して使用しています。Bing Maps AJAX Controlでは,このようなオプションの指定方法を多用しています。

プッシュピンに指定できるオプションは次の通りです。

オプション 説明
anchor プッシュピンが指し示す地点
Pointオブジェクトを指定
icon プッシュピンの画像のURL
height プッシュピンの縦幅
規定値は39
text プッシュピンに表示するテキスト
textOffset プッシュピンのテキストの表示位置
Pointオブジェクトを指定
規定値は(0, 5)
typeName プッシュピンの種類を任意に指定でき,指定した名前がプッシュピンを構成するHTMLタグのclass属性に指定される
visible 表示・非表示をtrue, falseで指定
width プッシュピンの横幅
規定値は25
zIndex プッシュピンとほかのオブジェクトとの重ね合わせ順序(Zインデックス)を指定

指定可能なオプションは以上です。標準機能だけではあまり凝ったことはできませんが,画像を用意して,以下のようにiconオプションを用いると自由な形のプッシュピンが作れます。

var pinOptions = {
    anchor: new Microsoft.Maps.Point(31, 31),
    icon: "http://image.gihyo.co.jp/assets/images/ICON/2010/thumb/TH64_641_bing-sdk.png",
    width: 64,
    height: 64}
var pin = new Microsoft.Maps.Pushpin(location, pinOptions);

上記コードの結果は図3の通りです。プッシュピンは,地図のズームの倍率によらず大きさは変わりません。

図3 画像を使用したプッシュピン

図3 画像を使用したプッシュピン

コンストラクタ以外でオプションの値を変更したり参照したい場合はPushpinクラスのメソッドを使用します。たとえば,textの値を取得するためにgetTextメソッドが用意されています。オプションの内容を変更したい場合は,setOptionsメソッドを使用します。

var t = pin1.getText();
pin1.setOptions({ text: 'I' });

ほかのオプションに対しても同様にgetから始まるメソッドが用意されています。

著者プロフィール

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

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

URL:http://katamari.jp

コメント

コメントの記入