Блог

Использование маркеров в ng-map angular JS

 <ng-map zoom-to-include-markers="auto" default-style="false" class="myMap">
    <marker ng-repeat="Customer in ListForDisplay"  position="{{Customer.location.lat}},{{Customer.location.lng}}" icon="{{Customer.icon}}" clickedaddress="{{Customer.address}}" clickedextras="{{Customer.extrasString}}" data="{{Customer}}"  on-click="markerSingleClick($event)" on-dblclick="markerDoubleClick($event)"></marker>
</ng-map>
  

Я могу получить доступ к строковым переменным в контроллере, но данные объекта по-прежнему остаются неопределенными в сеансах отладки:

 $scope.markerSingleClick = function (event) {
     var clickedaddress = this.clickedaddress;
     var clickedextras = this.clickedextras;
     var data = this.data;
  

Есть ли способ передать весь объект как часть маркера, а не отдельные строковые свойства

Чтобы передать текущий объект в качестве параметра через on-click событие marker, замените

 on-click="markerSingleClick($event)"
  

с

 on-click="markerSingleClick({{Customer}})"
  

а затем обновить markerSingleClick функцию:

 $scope.markerSingleClick= function (event,customer) {
    //...          
}; 
  

Рабочий пример

 angular.module('mapApp', ['ngMap'])
    .controller('mapCtrl', function ($scope, NgMap) {


        NgMap.getMap().then(function (map) {
            $scope.map = map;
        });
        $scope.cities = [
            { id: 1, name: 'Oslo', pos: [59.923043, 10.752839] },
            { id: 2, name: 'Stockholm', pos: [59.339025, 18.065818] },
            { id: 3, name: 'Copenhagen', pos: [55.675507, 12.574227] },
            { id: 4, name: 'Berlin', pos: [52.521248, 13.399038] },
            { id: 5, name: 'Paris', pos: [48.856127, 2.346525] }
        ];

        $scope.showInfo = function (event,city) {
              alert(JSON.stringify(city));
              //console.log(city);
        };
    });  

 <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?key="></script>
    <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
<div ng-app="mapApp" ng-controller="mapCtrl">
        <ng-map zoom="5" center="59.339025, 18.065818">            
            <marker ng-repeat="c in cities" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}" on-click="showInfo({{c}})">
            </marker>
        </ng-map>
    </div>  

Другим вариантом было бы передать идентификатор объекта в качестве параметра, например, его индекс:

 <marker ng-repeat="c in cities" on-click="showInfo($index)" position="{{c.pos}}" title="{{c.name}}" id="{{c.id}}">
</marker>
  

Тогда текущий объект может быть определен следующим образом:

 $scope.showInfo = function (event,index) {
     var currentCity = $scope.cities[index]; 
     //console.log(currentCity);
};