angularjs - ng-map:设置缩放级别时无法读取未定义的属性 'apply'

Question

我在 angularjs 应用程序中使用 ngMap。当我尝试在 map 元素上设置缩放时遇到错误。这是来自 Chrome 控制台的错误消息:

 TypeError: Cannot read property 'apply' of undefined
    at Wk.eventFunc (ng-map.js:205)
    at Object.T.trigger (main.js:18)
    at kf (main.js:22)
    at Wk.N.set (main.js:21)
    at Wk.setZoom (main.js:29)
    at ng-map.js:1568
    at angular.js:6837
    at forEach (angular.js:323)
    at Object.$get.Attributes.$set (angular.js:6835)
    at interpolateFnWatchAction (angular.js:8157)

这是在我的 map 元素的缩放属性时触发的:

<map center="{{initCenter.lat}}, {{initCenter.lng}}" zoom="{{zoom}}" on-dragend="dragend()" on-zoom_changed="zoomchanged()">

被绑定(bind)到我的 Angular Controller :

app.controller("mapCtrl", function ($scope, $location, dataContext) {
    $scope.markers = [];

    $scope.initCenter = dataContext.center();
    $scope.zoom = dataContext.zoom();

dataContext 是在应用程序中公开各种状态变量的服务。我还尝试通过函数设置 $scope.zoom ，但结果相同。

错误发生在 ng-map.js 文件的第 1568 行:

    var observeAndSet = function(attrs, attrName, object) {
  attrs.$observe(attrName, function(val) {
    if (val) {
      void 0;
      var setMethod = parser.camelCase('set-'+attrName);
      var optionValue = parser.toOptionValue(val, {key: attrName});
      void 0;
      if (object[setMethod]) { //if set method does exist
        /* if an location is being observed */
        if (attrName.match(/center|position/) && 
          typeof optionValue == 'string') {
          _this.getGeoLocation(optionValue).then(function(latlng) {
            object[setMethod](latlng);
          });
        } else { 
          // this is the line that causes the problem
          object[setMethod](optionValue);
        }
      }
    }
  });
};

在试图追踪正在发生的事情时，我遵循了设置中心和设置缩放的执行(设置中心不会导致问题)。设置中心执行第 1568 行并继续其愉快的方式。

设置缩放(通过 setZoom 函数)会导致 ng-map.js 中第 196 行的代码执行:

      var eventFunc = function(attrValue) {
    var matches = attrValue.match(/([^\(]+)\(([^\)]*)\)/);
    var funcName = matches[1];
    var argsStr = matches[2].replace(/event[ ,]*/,'');  //remove string 'event'

    var args = scope.$eval("["+argsStr+"]");
    return function(event) {
      function index(obj,i) {return obj[i];}
      var f = funcName.split('.').reduce(index, scope);
      // this next line causes an exception in google map main.js
      f.apply(this, [event].concat(args));
      scope.$apply();
    }
  }

第 205 行导致异常，导致谷歌地图的 main.js 文件中出现错误。

知道是什么原因造成的吗？以及如何解决它:)？

可能的解决方案

玩这个多一点我注意到它本身并没有设置导致问题的缩放级别。它实际上是 zoomchanged 事件触发的结果 >>after<< 缩放改变。

第一次在 map 上设置缩放，第 204 行:

var f = funcName.split('.').reduce(index, scope);

评估为空。我不确定为什么会这样，因为我不明白那条线在做什么。

然而， future 对缩放的更改使同一行 204 解析为 f 的非空值。

因此，作为一种解决方法，我将第 205 行和第 206 行括起来，如下所示:

  if (f != null) {
      f.apply(this, [event].concat(args));
      scope.$apply();
  }

错误消失了。

Answer 1

我认为这与这个问题有同样的问题，https://github.com/allenhwkim/angularjs-google-maps/issues/181

并在 1.7.7 版本中解决。

我使用了 $timeout，而不是 $apply。