Использование прослушивателей событий с ngMap

Question

Я использую замечательный ngMap от Allenhwkim в проекте. Я знаю, что мне нужно использовать 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.

Заканчивать эту документацию: 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

Edit:

Вы можете использовать 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