javascript 在 ngMap 中使用事件侦听器
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/28753812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Event listeners with ngMap
提问by Jay
I'm using Allenhwkim's wonderful ngMap in a project. I know that I need to use Maps Javascript v3 API to manipulate the map, which is going well except that I can't get any event listeners, e.g., $google.maps.event.addListener(markers[i], 'click', function()...
to work
我在一个项目中使用 Allenhwkim 的精彩 ngMap。我知道我需要使用 Maps Javascript v3 API 来操作地图,这很顺利,只是我无法获得任何事件侦听器,例如,$google.maps.event.addListener(markers[i], 'click', function()...
工作
Specifically, I'm trying to create an onClick event on my markers. Here's an example: http://plnkr.co/edit/HAcEfWl5LR9SGGqbcXcW?p=preview
具体来说,我试图在我的标记上创建一个 onClick 事件。这是一个例子:http: //plnkr.co/edit/HAcEfWl5LR9SGGqbcXcW?p=preview
Here, I try to use an ng-click attribute on a marker directive. Still, I get nothing. http://plnkr.co/edit/FqwNhqEgDe75il8nU0sC?p=preview
在这里,我尝试在标记指令上使用 ng-click 属性。尽管如此,我什么也得不到。http://plnkr.co/edit/FqwNhqEgDe75il8nU0sC?p=preview
回答by ztan
You can use ngMap's specific UI event methods.
您可以使用 ngMap 的特定 UI 事件方法。
Check out this documentation: https://ngmap.github.io/events.html#/event-simple#event-simple
查看此文档:https: //ngmap.github.io/events.html#/event-simple#event-simple
also sample code:
还有示例代码:
HTML:
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:
JavaScript:
$scope.click = function(event) {
map.setZoom(8);
map.setCenter(marker.getPosition());
}
Sample code link: http://plnkr.co/edit/mli6jTMwGE9k35GFPZT9?p=preview
示例代码链接:http: //plnkr.co/edit/mli6jTMwGE9k35GFPZT9?p=preview
Edit:
编辑:
You can use google.maps.event.addListener
, but you need to create variables to hold your marker, and add the listeners to the markers.
您可以使用google.maps.event.addListener
,但您需要创建变量来保存标记,并将侦听器添加到标记中。
You can change the code in your script.js to the following:
您可以将 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, {});
});
});
Notice this line var marker = new google.maps.Marker({position:latLng});
You can try in this link: http://plnkr.co/edit/LiblBBvauGnn67xOy96D?p=preview
请注意这一行var marker = new google.maps.Marker({position:latLng});
您可以在此链接中尝试:http: //plnkr.co/edit/LiblBBvauGnn67xOy96D?p=preview