在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> 
  

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屋！