將事件監聽器與ngMap一起使用

Question

我正在一個項目中使用Allenhwkim的精彩ngMap。 我知道我需要使用Maps Javascript v3 API來操作地圖，除了我無法獲得任何事件監聽器之外，這很順利，例如， $google.maps.event.addListener(markers[i], 'click', function()...工作

具體來說，我正在嘗試在我的標記上創建一個onClick事件。 這是一個例子： http ： //plnkr.co/edit/HAcEfWl5LR9SGGqbcXcW？p = preview

在這里，我嘗試在marker指令上使用ng-click屬性。 不過，我一無所獲。 http://plnkr.co/edit/FqwNhqEgDe75il8nU0sC?p=preview

Answer 1

您可以使用ngMap的特定UI事件方法。

查看此文檔： https ： //ngmap.github.io/events.html#/event-simple#event-simple

還有示例代碼：

HTML：

<div ng-controller="EventSimpleCtrl" class="ng-scope">
      <map zoom="4" center="-25.363882, 131.044922" on-center-changed="centerChanged()">
        <marker position="-25.363882, 131.044922" on-click="click()" title="Click to zoom"></marker> 
      </map>
    </div>

JavaScript的：

 $scope.click = function(event) {
      map.setZoom(8);
      map.setCenter(marker.getPosition());
    }

示例代碼鏈接： http ： //plnkr.co/edit/mli6jTMwGE9k35GFPZT9？p = preview

編輯：

您可以使用google.maps.event.addListener ，但需要創建變量來保存標記，並將偵聽器添加到標記中。

您可以將script.js中的代碼更改為以下內容：

var app = angular.module('myApp', ['ngMap']);

  app.controller('mapController', function($scope, $http, $interval) {
    var map;
    $scope.dynMarkers = [];
    $scope.$on('mapInitialized', function(event, evtMap) {
      map = evtMap;
      for (var i=0; i<1000; i++) {
        var latLng = new google.maps.LatLng(markers[i].position[0], markers[i].position[1]);
        var marker = new google.maps.Marker({position:latLng});
        $scope.dynMarkers.push(marker);

        google.maps.event.addListener(marker, 'click', function() {

            alert("this is marker " + i);
        });

      }
      $scope.markerClusterer = new MarkerClusterer(map, $scope.dynMarkers, {});
    });
  });

注意這行var marker = new google.maps.Marker({position:latLng}); 您可以嘗試以下鏈接： http ： //plnkr.co/edit/LiblBBvauGnn67xOy96D？p = preview