Как получить координаты щелчка на угловых картах Google?

Question

Я вроде как новичок, когда дело доходит до AngularJS и API Google для карт, и я пытаюсь получить координаты при нажатии. Я использую this API.

Я получаю сообщение об ошибке: Uncaught TypeError: Невозможно прочитать свойство «lat» undefined на «console.log (lat);» строка

Это мой угловой регулятор:

app.controller("agencyController",['$scope', '$log','uiGmapGoogleMapApi', function($scope,$interval, GoogleMapApi){ 
markers = [], 
angular.extend($scope, { 
markeri : markers, 
map : { 
    center: bgdcentar, 
    zoom:13, 
    options: { 
     mapTypeId : google.maps.MapTypeId.ROADMAP, 
     mapTypeControl: true, 
     streetViewControl: false, 
     styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}], 
     disableDoubleClickZoom: true, 
     scaleControl: true, 
     scrollwheel: true, 
     panControl: true, 
     streetViewControl: false, 
     draggable: true, 
     overviewMapControl: true,  
    }, 
    events:{ 
     rightclick: function(event){ 
      var lat = event.latLng.lat(); 
      var lng = event.latLng.lng(); 
      console.log(lat); 
      console.log(lng); 
      console.log('Stan dodat!'); 
      markers.push(); 
     }, 
    }, 

}, 
searchbox : { 
    template: 'searchbox.tpl.html', 
    events:{ 
     places_changed: function(searchBox){ 
     }, 
     parentdiv: 'map_canvas' 
    } 
}, 
}); 

}]); 

И это часть моей HTML код включен в контроллер, так что не беспокойтесь о том, что:

<div id="map_canvas"> 

    <ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' events='map.events' > 
     <ui-gmap-search-box template="searchbox.template" events="searchbox.events"></ui-gmap-search-box> <!-- search--> 
     <ui-gmap-markers models="markeri" coords="'self'" icon="'icon'"></ui-gmap-markers> <!-- markeri -->  
    </ui-gmap-google-map> 
</div> 

Answer 1

вы нужно заменить:

rightclick: function(event){ 
    //... 
} 

с:

rightclick: function (map, eventName, events) { 
    var event = events[0]; 
    //... 
} 

где

map относится к карте объекта, eventName - название события events - список слушателей событий

Пример

angular.module('appMaps', ['uiGmapgoogle-maps']) 
 
    .config(function(uiGmapGoogleMapApiProvider) { 
 
    uiGmapGoogleMapApiProvider.configure({ 
 
     //key: '' 
 
    }); 
 
    }) 
 

 

 
.controller("mainCtrl", ['$scope', '$log', 'uiGmapGoogleMapApi', 
 
    function($scope, $interval, GoogleMapApi) { 
 

 
    angular.extend($scope, { 
 
     markers: [], 
 
     markerNo: 1, 
 
     map: { 
 
     center: { 
 
      latitude: 42.3349940452867, 
 
      longitude: -71.0353168884369 
 
     }, 
 
     zoom: 13, 
 
     options: { 
 

 
     }, 
 
     events: { 
 
      rightclick: function(map, eventName, events) { 
 
      var event = events[0]; 
 
      var lat = event.latLng.lat(); 
 
      var lng = event.latLng.lng(); 
 
      $scope.$apply(function() { 
 
       $scope.markers.push({ 
 
       latitude: lat, 
 
       longitude: lng, 
 
       id: $scope.markerNo 
 
       }); 
 
       $scope.markerNo++; 
 
      }); 
 

 
      }, 
 
     }, 
 

 
     } 
 
    }); 
 

 
    } 
 
]);

.angular-google-map-container { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 240px; 
 
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script> 
 
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script> 
 

 
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl"> 
 
    <ui-gmap-google-map center='map.center' zoom='map.zoom' options='map.options' events='map.events'> 
 
    <ui-gmap-markers models="markers" coords="'self'" icon="'icon'"></ui-gmap-markers> 
 
    </ui-gmap-google-map> 
 
</div>