4

我在一个项目中使用 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

4

1 回答 1

8

您可以使用 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

于 2015-02-26T23:03:16.963 回答