Angular google maps click事件：无法读取未定义的属性“click” [英] Angular google maps click event: Cannot read property 'click' of undefined

问题描述

我正在使用离子框架

我哪里出错？

UPD 以某种方式$ scope.map.events未定义，但我可以，例如，控制台.log它并看到它在错误发生之前定义。所有事件都发生同样的错误。例如，

 事件：{
 tilesloaded：function（map）{
 $ scope。$ apply （function（）{
 $ scope.mapInstance = map; 
 $ log.info（'tiles loaded'）; 
}）; 
} 
} 
  

返回

 未捕获TypeError：无法读取未定义的属性'tilesloaded'
  

在具有相同堆栈跟踪的控制台中。

解决方案

您已经将两种方法混合在一起;分配范围和扩大范围。使用对象扩展$ scope（即不是 $ scope.map = ）
并且您的代码变为......

  angular.extend（$ scope，{
 map：{
 center：{latitude：53.902407，经度：27.561621}，
 zoom：15，
选项：{
 maxZoom：16，
 minZoom：13，
 styles：mapStyles.bright 
}，.... 
 }）
  

或使用作业范围

  $ scope.map = {
 center：{latitude：53.902407，经度：27.561621}，
 zoom：15，
期权：{
 maxZoom：16，
 minZoom：13，
样式：mapStyles.bright 
}，.... 
  

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

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.

解决方案

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/

这篇关于Angular google maps click事件：无法读取未定义的属性“click”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！