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

将事件监听器与ngMap一起使用

1 个答案: