使ってみよう! Bing API/SDK

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

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

はじめに

Webページに地図を貼り付けられるBing Maps AJAX Controlの3回目です。前回は地図上にプッシュピンやポリラインやポリゴンといった図形を表示する方法を紹介しました。今回は,そのプッシュピンをクリックしたときに情報を表示する図1などイベント処理について紹介します。

図1 情報の表示

図1 情報の表示

イベントとイベントハンドラーの関連付け

Bing Maps AJAX Controlでは,地図を表すMapオブジェクトや,プッシュピンを表すPushpinオブジェクトなどのイベントを管理するEventsオブジェクトが用意されています。このEventsオブジェクトのaddHandlerメソッドを使用して,各オブジェクトのイベントに対するイベントハンドラー(イベントを処理する関数)を関連付けします。Eventsオブジェクトはインスタンスを生成する必要はありません。

たとえば,プッシュピンをクリックしたときにダイアログを表示するようには次のように記述します。

// pin は Pushpin オブジェクト
Microsoft.Maps.Events.addHandler(pin, "click", function (e) {
        alert(e.getX() + ", " + e.getY());
});

addHandlerメソッドの引数は順に,イベントを関連付けるオブジェクト,イベント名,イベントハンドラーです。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(0, 0)
            };
            var map = new Microsoft.Maps.Map(document.getElementById("map"), options);

            // Pushpin オブジェクトの生成
            var pin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(0, 0));

            // イベントハンドラーの関連付け
            Microsoft.Maps.Events.addHandler(pin, "click", function (e) {
                alert(e.getX() + ", " + e.getY());
            });

            // 地図へプッシュピンを追加
            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オブジェクトのクリック(click)イベントにイベントハンドラーを関連付けています。マウス関連のイベントはこれ以外にも,Map,Pushpin,Polyline,Polygonオブジェクトにそれぞれ,click,dbclick,mousedown,mouseout,mouseover,mouseup,rightclickというイベントがあります。

すべてのマウスイベントでは,イベントハンドラーにMouseEventArgsオブジェクトが渡されます。このオブジェクトからクリックした座標やクリックされたオブジェクトなどを得ます。紹介したコードではイベントハンドラーで,getXgetYメソッドを呼んでいます。MouseEventArgsオブジェクトには次のプロパティとメソッドが用意されています。

プロパティ

名前 説明
eventName イベント名
pageX マウスポインターのWebページ内のX座標(ピクセル)
pageY マウスポインターのWebページ内のY座標(ピクセル)
target イベントが起きたオブジェクト
targetType targetの種類(文字列)⁠
map, polygon, polyline, pushupin

メソッド

名前 説明
getX マウスポインターのX座標(ピクセル)
getY マウスポインターのY座標(ピクセル)

getX,getYメソッドで得られる値は,表示されている地図の中心を (0,0) とした相対値です。それぞれの値を表示するコードは次の通りです。

Microsoft.Maps.Events.addHandler(pin, "click", function (e) {
    alert(
        "eventName = " + e.eventName + "\n" +
        "target = " + e.target.toString() + "\n" +
        "targetType = " + e.targetType + "\n" +
        "pageX = " + e.pageX + ", pageY = " + e.pageY + "\n" +
        "getX = " + e.getX() + ", getY = " + e.getY());
});

著者プロフィール

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

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

URL:http://katamari.jp

コメント

コメントの記入