Wie komme ich auf eckige Google-Karten?

Question

Ich bin eine Art Newb, wenn es um AngularJS und Googles API für Karten geht, und ich habe versucht, Koordinaten beim Klicken zu bekommen. Ich verwende this API.

Ich erhalte einen Fehler: Uncaught TypeError: Kann die Eigenschaft 'lat' von undefined nicht lesen auf "console.log (lat);"

Reihe

Das ist mein Winkelregler:

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' 
    } 
}, 
}); 

}]); 

Und das ist ein Teil meiner html, wird der Code in der Steuerung enthalten also keine Sorgen darüber:

<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

Sie ersetzen müssen:

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

mit:

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

wo

map verweist Objekt auf der Karte, eventName - der Name der Veranstaltung events - die Liste der Ereignis-Listener

Beispiel

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>