在ngMap中使用Event监听器 [英] Using Event listeners with ngMap
问题描述
我在一个项目中使用了Allenhwkim的美妙的ngMap。我知道我需要使用Maps Javascript v3 API来操作地图,除非我无法获得任何事件侦听器,例如 $ google.maps.event.addListener(markers [ i),'click',function()...
工作
具体来说,我试图在我的marker
下面是一个例子: http://plnkr.co/edit/HAcEfWl5LR9SGGqbcXcW?p =预览
在这里,我尝试在marker指令中使用ng-click属性,但我什么也没有得到。 http://plnkr.co/edit/FqwNhqEgDe75il8nU0sC?p=preview
查看此文档: https://ngmap.github.io/events.html#/even t-simple#event-simple
也是示例代码:
< div ng-controller =EventSimpleCtrlclass =ng-scope>
< / 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 = []; $ b $ $('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
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
Specifically, I'm trying to create an onClick event on my markers. Here's an example: 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
You can use ngMap's specific UI event methods.
Check out this documentation: https://ngmap.github.io/events.html#/event-simple#event-simple
also sample code:
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());
}
Sample code link: 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.
You can change the code in your script.js to the following:
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
这篇关于在ngMap中使用Event监听器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!