我在一个项目中使用 Allenhwkim 的精彩 ngMap。我知道我需要使用 Maps Javascript v3 API 来操作 map ,这很顺利,除了我无法获得任何事件监听器,例如 $google.maps.event.addListener(markers[i], 'click', function()...
开始工作
具体来说,我正在尝试在我的标记上创建一个 onClick 事件。 这是一个例子:http://plnkr.co/edit/HAcEfWl5LR9SGGqbcXcW?p=preview
在这里,我尝试在标记指令上使用 ng-click 属性。尽管如此,我还是一无所获。 http://plnkr.co/edit/FqwNhqEgDe75il8nU0sC?p=preview
最佳答案
您可以使用 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
关于javascript - 将事件监听器与 ngMap 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28753812/