将事件侦听器与 ngMap 结合使用

Question

我在项目中使用了 Allenhwkim 的精彩 ngMap。我知道我需要使用 Maps Javascript v3 API 来操作地图，这很顺利，除了我无法获得任何事件侦听器，例如 $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

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());
    }

示例代码link：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}); 你可以试试这个link：http://plnkr.co/edit/LiblBBvauGnn67xOy96D?p=preview

将事件侦听器与 ngMap 结合使用

Using Event listeners with ngMap

javascript

google-maps

google-maps-api-3

ng-map