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

はじめに

Webページに地図を貼り付けられるBing Maps AJAX Controlの3回目です。前回は地図上にプッシュピンやポリラインやポリゴンといった図形を表示する方法を紹介しました。今回は、そのプッシュピンをクリックしたときに情報を表示する（図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の通りです。

マウスイベント

紹介したコードでは、Pushpinオブジェクトのクリック（click）イベントにイベントハンドラーを関連付けています。マウス関連のイベントはこれ以外にも、Map、Pushpin、Polyline、Polygonオブジェクトにそれぞれ、click、dbclick、mousedown、mouseout、mouseover、mouseup、rightclickというイベントがあります。

すべてのマウスイベントでは、イベントハンドラーにMouseEventArgsオブジェクトが渡されます。このオブジェクトからクリックした座標やクリックされたオブジェクトなどを得ます。紹介したコードではイベントハンドラーで、getX、getYメソッドを呼んでいます。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());
});

プッシュピンの情報の表示

よくある地図のアプリケーションでは、プッシュピンをクリックしたりプッシュピンにマウスポインターを合わせたりすると何かしらの動作をするものが多いと思います（図3⁠）⁠。

Bing Maps AJAX Controlでは、プッシュピンにこのような機能は用意されていませんので、自分で実装する必要があります。今回紹介したイベントの関連付けとマウスイベントを使用して、プッシュピンにマウスポインターを合わせた時に、情報を表示するコードを書いてみましょう。

表示する情報

情報を表示するダイアログは、HTMLとCSSで作成します。今回は文字の表示だけですが、ここにリンクやボタンなどを追加し、JavaScriptなどで処理を記述するとダイアログとして機能することになります。次のHTMLタグを<body>要素内に追加しておきます。

<div id='info' style="position: absolute; border: 1px solid gray; background-color: white; width: 150px; height:45px; display: none;">Sample</div>

このdiv要素を、プッシュピンにマウスポインターが合わさったときにプッシュピンの上に表示し、はずれたときに非表示にするようコードを記述します。

経緯度からピクセル座標への変換

マウスポインターの位置はMouseEventArgsオブジェクトのプロパティを使用してもよいですが、ここでは、プッシュピンの指し示す経緯度からWebページ上の座標へ変換して使用してみましょう。経緯度の値からピクセルの座標に変換するには、MapオブジェクトのtryLocationToPixelメソッドを使います。Pushpinの指し示す経緯度はgetLocationメソッドで得られます。

// map: Map オブジェクト、pin: Pushpin オブジェクト
var point = map.tryLocationToPixel(pin.getLocation(), Microsoft.Maps.PixelReference.page);

tryLocationToPixelメソッドの引数は、経緯度（Locationオブジェクト）とPixelReference列挙体です。引数の経緯度は、ひとつのLocationオブジェクトではなく配列としても渡せます。PixelReference列挙体の値は次の3種類があり、これにより得られる座標の値の基準が変わります。

名前	説明
control	表示されているMapオブジェクトの左上を(0,0)とした座標
page	Webページの左上を(0,0)とした座標
viewport	地図の中心（経緯度ともに0度）を(0,0)とした座標

viewportの場合、地図の中心からの距離をピクセルに変換するため、ズームレベルによっても異なり、非常に大きな値になる場合もあります。

tryLocationToPixelの戻り値は、Pointオブジェクト（Locationオブジェクトの配列を渡した場合はPointオブジェクトの配列）またはnullです。変換に失敗した場合にnullが戻ってきます。Pointオブジェクトはx、yプロパティを持っています。

ちなみに、ピクセルから経緯度に変換するtryPixelToLocationメソッドもMapクラスにはあります。その場合、Pointオブジェクト（ひとつまたは配列）とPixelReference列挙体が引数になります。

// map: Map オブジェクト、point: Point オブジェクト
var location = map.tryPixelToLocation(point, Microsoft.Maps.PixelReference.page);

マウスイベント処理

それでは、マウスイベント処理を記述して、プッシュピンにマウスポインターを合わせた時に、情報を表示できるようにしてみましょう。使用するイベントは、mouseoverとmouseoutです。

まず、マウスポインターをプッシュピンに合わせたときの動作です。プッシュピンの経緯度をピクセル座標に変換し、CSSのleft、topの値に反映します。displayの値も変更し、作成したダイアログのdiv要素を適当な位置に表示します。

Microsoft.Maps.Events.addHandler(pin, "mouseover", function (e) {
    var point = map.tryLocationToPixel(pin.getLocation(), Microsoft.Maps.PixelReference.page);

    var info = document.getElementById("info");
    info.style.left = (point.x - 80) + "px";
    info.style.top = (point.y - 100) + "px";
    info.style.display = "block";
});

次に、マウスポインターがプッシュピンから離れたときの動作です。こちらはCSSのdisplay値を変更しているだけです。

Microsoft.Maps.Events.addHandler(pin, "mouseout", function (e) {
    var info = document.getElementById("info");
    info.style.display = "none";
});

以上で、地図アプリケーションらしい動作が記述できました。うまく動いたでしょうか？　問題がなければ図4のように表示されると思います。

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

最後に、イベントとイベントハンドラーの関連付けの削除についても紹介しておきます。関連付けの削除は、removeHandlerメソッドを使用します。

Microsoft.Maps.Events.removeHandler(handlerId);

removeHandlerメソッドの引数は、addHandlerメソッドの戻り値です。これまで紹介したコードでは、EventsオブジェクトのaddHandlerメソッドの戻り値は無視していましたが、次のようにaddHandlerメソッドの戻り値を受け取っておき、removeHandlerメソッドに使用します。

// var handlerId = null; のように記述しておく

handlerId = Microsoft.Maps.Events.addHandler(pin, "click", function (e) {
    // Do something
});

今回はここまでです。いかがでしたでしょうか。次回もBing Maps AJAX Controlについて紹介する予定です。