Using Event listeners with ngMap

问题

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

回答1:

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

来源：https://stackoverflow.com/questions/28753812/using-event-listeners-with-ngmap

标签

javascript

google-maps

google-maps-api-3

ng-map