将事件监听器与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