角谷歌地图单击事件：无法读取未定义的属性“单击”

Question

I'm using angular google maps with ionic framework and trying to get coordinates on click. In view directive is injected like so

<ui-gmap-google-map center="map.center" zoom="map.zoom" dragging="true" options="map.options" events="map.events"></ui-gmap-google-map>

And here is my controller part

angular.extend($scope,

  $scope.map = {
    center: {latitude: 53.902407, longitude: 27.561621 },
    zoom: 15,
    options: {
      maxZoom: 16,
      minZoom: 13,
      styles: mapStyles.bright
    },
    events: {
      click: function (mapModel, eventName, originalEventArgs) {
        $log.info("user defined event: " + eventName, mapModel, originalEventArgs);

        var e = originalEventArgs[0];
        var lat = e.latLng.lat(),
          lon = e.latLng.lng();
        console.log('You clicked here ' + 'lat: ' + lat + ' lon: ' + lon);
        //scope apply required because this event handler is outside of the angular domain
        $scope.$apply();
      }
    }
  });

Event part is basically copy-pasted from examples in docs. However, when I click it, I get an error

Where did I go wrong?

UPD Somehow $scope.map.events is undefined, although I can, for instance, console.log it and see that it's defined before the error occurs. Same error is happening for all events. For example,

 events: {
        tilesloaded: function (map) {
            $scope.$apply(function () {
                $scope.mapInstance = map;
                $log.info('tiles loaded');
            });
        }
 }

returns

Uncaught TypeError: Cannot read property 'tilesloaded' of undefined

in console with the same stacktrace.

Answer 1

You have mixed two ways of bringing something into scope; assignment to scope and extending scope. Either extend the $scope with an object (ie not $scope.map = ) and your code becomes...

angular.extend($scope,{
  map: {
    center: {latitude: 53.902407, longitude: 27.561621 },
    zoom: 15,
    options: {
      maxZoom: 16,
      minZoom: 13,
      styles: mapStyles.bright
    },....
})

or use assignment to scope

$scope.map = {
  center: {latitude: 53.902407, longitude: 27.561621 },
  zoom: 15,
  options: {
    maxZoom: 16,
    minZoom: 13,
    styles: mapStyles.bright
  },....

http://moduscreate.com/angularjs-tricks-with-angular-extend/