AngularJSを使ってGoogleマップ(4)マーカーでイベントを処理

地図上に表示されているマーカーでイベントを処理する方法についてです。

マーカーをダブルクリックするイベントを検知し、地図をズームアップし、地図の中心をマーカーの位置に移動するサンプルコードを作ってみました。
 
デモとコードサンプルはこちら
 

サンプルコードの説明


 
1)ui-gmap-markerタグにevents属性追加(HTML)
 
<ui-gmap-marker ng-repeat=”m in map.markers” coords=”m” events=”m.events” idKey=”m.id” options=”m.options” isLabel=’true’ >
</ui-gmap-marker>
 
2)マーカーで使用できるイベント
 
下記参照
https://developers.google.com/maps/documentation/javascript/reference#Marker
 
3)イベント検知時に実行する関数を定義
 
・地図のズームを17に変更します。
・マーカーの位置情報(緯度・経度)を取得し、その位置を地図の中心に設定します。

var onMarkerDblclickd = function (marker, eventName, args) {
  $scope.map.zoom = 17;
  $scope.map.center.latitude = marker.getPosition().lat();
  $scope.map.center.longitude = marker.getPosition().lng();
  $scope.$apply();
}

 
4)各マーカーのイベント定義に上記関数を設定
 

markers: [
  {
   :
    events: {
      dblclick: function (marker, eventName, args) {
        onMarkerDblclickd(marker, eventName, args);
      }
    }
  },
関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です