5

angularjs アプリで ngMap を使用しています。マップ要素にズームを設定しようとすると、エラーが発生します。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)

これは、マップ要素の zoom 属性が次の場合にトリガーされます。

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

私のAngularコントローラーにバインドされています：

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 行目で例外が発生し、Google マップの main.js ファイル内でエラーが発生します。

これの原因は何ですか？そして、それを解決する方法:)?

考えられる解決策

これをもう少しいじってみると、ズームレベル自体を設定していないことが問題の原因であることに気付きました。これは実際には、ズームが変更された後に発生した zoomchanged イベントの結果です。

204 行目で、初めてズームがマップに設定されます。

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

null に評価されます。その行が何をしているのか理解できないので、それがなぜなのかわかりません。

ただし、ズームへの将来の変更では、同じ行 204 が f の非 null 値に解決されます。

そこで、回避策として、205 行目と 206 行目を次のように括弧で囲みました。

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

そしてエラーは消えました。

4

1 に答える 1

0

これには、この問題と同じ問題があると思います https://github.com/allenhwkim/angularjs-google-maps/issues/181

1.7.7 のリリースで解決されました。

$apply の代わりに $timeout を使用しました。

于 2015-05-02T15:47:00.477 に答える