Bing Maps で地図を使う（３）

Bing Mapsによる地図のプッシュピン（マーカー）設定についてご紹介します。

Bing Maps V8 Web Control を使用します。地図を表示する方法は Bing Maps で地図を使う（２）を参照してください。

プッシュピンとは
プッシュピンの作成
実行サンプル

プッシュピンとは

以下のように地図の真ん中に表示されているピンク色のサークルがプッシュピンです。今回はプッシュピンをマウスドラッグした後の動作を設定します。

プッシュピンの作成

Location オブジェクトの作成

プッシュピンの位置を指定するために Locationクラスのオブジェクトを作成します。第１引数は緯度、第２引数は経度を指定します。

var marker_pos = new Microsoft.Maps.Location(35.68135257803937, 139.76609230041504);

Pushpinオブジェクトの作成

Pushpinクラスのオブジェクトを作成します。コンストラクタの第１引数には、プッシュピンの位置を指定した Locationオブジェクト、第２引数にはプッシュピンのオプションを指定します。

var pin = new Microsoft.Maps.Pushpin(marker_pos,
    {
        draggable: true
    }
);

パラメータの内容は以下のとおりです。

draggable

ドラッグを可能にする（true）／不可能にする（false）

プッシュピンの追加

Pushpinオブジェクト（pin）を Mapオブジェクト（map）に追加します。

 map.entities.push(pin);

Pushpinオブジェクト（pin）にマウスドラッグ後のイベントハンドラを追加します。 Eventsクラスの addHandler関数を使用します。
第１引数に Pushpinオブジェクト、第２引数にイベントの種類、第３引数にイベントハンドラ（イベント発生時に実行する関数）を指定します。
以下の例はプッシュピンのドラッグ終了後にプッシュピンを中心位置とした地図を表示します。

Microsoft.Maps.Events.addHandler(pin, 'dragend',
function(e) {
    if (e.targetType == "pushpin") {
        var options = map.getOptions(); // 地図のオプションを取得
        options.center = e.location; // 地図中心位置をプッシュピン位置に設定
        map.setView(options); // オプションを使用して地図を表示
    }
});

MouseEventArgsクラス

マウスイベントハンドラは実行時に MouseEventArgsクラスオブジェクト（e）が引数として渡されます。 MouseEventArgs クラスのプロパティは以下のとおりです。

location	マウスイベントが発生した位置を示す Locationオブジェクト
targetType	マウスイベントが発生したオブジェクトのタイプ。 map、layer、polygon、 polyline、pushpin のいずれか

他のプロパティについては MouseEventArgs Objectを参照してください。

実行サンプル

HTMLファイルのソースコードです。ブラウザで実行すると地図が表示されます。プッシュピンをドラッグすると、プッシュピンを中心とした地図が再表示されます。
※ APIキーを記述してください。

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol"></script>
<script type="text/javascript">
function init() {
    var center_lat = 38.479394;  // 地図中心緯度
    var center_lng = 137.724609; // 地図中心経度

    var marker_lat = 35.68135257803937;  // プッシュピン緯度 （東京駅）
    var marker_lng = 139.76609230041504; // プッシュピン経度
    var zoom = 5; // ズームレベル

    // 地図の中心位置を示す Locationオブジェクトを作成
    var center_pos = new Microsoft.Maps.Location(center_lat, center_lng);

    // Mapオブジェクトを作成
    var map = new Microsoft.Maps.Map('#bing_map',
        {
            credentials         : "APIキー",
            center              : center_pos,
            mapTypeId           : Microsoft.Maps.MapTypeId.aerial,
            zoom                : zoom,
            labelOverlay        : Microsoft.Maps.LabelOverlay.hidden,
        }
    );

    // プッシュピン位置を示す Locationオブジェクトを作成
    var marker_pos = new Microsoft.Maps.Location(marker_lat, marker_lng);

    // Pushpinオブジェクトを作成
    var pin = new Microsoft.Maps.Pushpin(marker_pos,
        {
            draggable: true
        }
    );

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

    // プッシュピンをドラッグした後のハンドラを追加
    Microsoft.Maps.Events.addHandler(pin, 'dragend',
        function(e) {
                if (e.targetType == "pushpin") {
                    var options = map.getOptions(); // 地図のオプションを取得
                    options.center = e.location; // 地図中心をプッシュピン位置に設定
                    map.setView(options); // オプションを使用して地図を表示
                }
        });
}
</script>
</head>

<body onload="init();">
<div id="bing_map" style="width:640px; height:400px;"></div>
</body>
</html>