谷歌地图显示未捕获的错误:达到10次$digest()迭代.流产!角的应用

Google maps showing Uncaught Error: 10 $digest() iterations reached. Aborting!; angular app

本文关键字:迭代 digest 流产 应用 10次 显示 错误 达到 谷歌地图      更新时间:2023-09-26

我试图用我的角应用程序创建一个地图,以显示地图上的坐标。这些坐标是从我的api中获得的,并显示在详细页面上。但是HTML代码给了我错误:

未捕获错误:10 $digest()迭代到达。流产!

HTML:

<input  value="{{place.place.name}}">

<label>zoom</label>
<input type="number" ng-model="zoom"/>
<div id="map_canvas">
<google-map center="{latitude: place.place.lat,longitude: place.place.lng}" zoom="zoom" draggable="true" options="options">
  <marker coords="{latitude: place.place.lat,longitude: place.place.lng}"></marker>
</google-map>
</div>

所有这些代码都显示了上面的错误。我该如何解决这个问题?下面是我的javascript,总的来说,我有一个地方列表,然后用户点击这个地方和这个地方的细节。该页还允许用户向该页添加类别。这是整个控制器链接到地图所在的页面:

 $http.get('http://94.125.132.253:8000/getuncategorisedplaces').success(function (data, status, headers) {
    $scope.places = data;
    console.log(data);
    $scope.message = 'Uncategorised places';
})
$scope.id = $routeParams.id;
$scope.showplace = function(id) {
  $http({method: 'GET', url: 'http://94.125.132.253:8000/getitemdata?ID=' + $scope.id}).
      success(function(data, status, headers, config) {
          $scope.place = data;               //set view model
          console.log(data);
          console.log(id);
           $scope.view = 'templates/detail.html';
      })
      .error(function(data, status, headers, config) {
          $scope.place = data || "Request failed";
          $scope.status = status;
          $scope.view = 'templates/detail.html';
      });
   }
  $scope.showplace();

      $scope.map = function(){
 $scope.zoom = 13;

  }
$scope.map();
$scope.meta = function () {
    $http.get('http://94.125.132.253:8000/getmetas').success(function (data, status, headers) {
        $scope.metas = data;
        console.log($scope.category);
        console.log(data);
        $scope.message = 'List of Uncategorised places';

    })
}
$scope.meta();
$scope.meta1 = function (data, status, headers) {
    var formdata = {
        'cat': $scope.cat,
    }
    var inserturl = 'http://94.125.132.253:8000/getcategories?meta=' + formdata.cat;
    return $http.get(inserturl).success(function (data, status, headers) {
        $scope.categories = data;
        console.log(formdata.cat);
        console.log(data);
    });
};

$scope.$watch('cat', function (newvalue) {
    $scope.meta1();
});
$scope.meta2 = function (data, status, headers) {
    var formdata = {
        'category': $scope.category,
    }
    var inserturl = 'http://94.125.132.253:8000/getsubcategories?category=' + formdata.category;
    return $http.get(inserturl).success(function (data, status, headers) {
        $scope.subcategories = data;
        console.log(formdata.sub);
        console.log(data);
    });
};
$scope.$watch('category', function (newvalue2) {
    $scope.meta2();
});

我想你对使用angularjs的谷歌地图感兴趣。

我建议使用另一种方法ng-map,就像我在这里建议的那样Google maps for AngularJS

使用ngMap,我可以很容易地满足你的需求,你不必知道指令选项和指令。

<script>
var MyCtrl = function($scope) {
  $scope.updateCenter = function(lat,lng) {
    $scope.map.setCenter(new google.maps.LatLng(lat, lng));
  }
}
</script>
<body ng-controller="MyCtrl">
  <map center="[40.74, -74.18]"></map>
  <button ng-click="updateCenter(41.74, -75.18)">Update Center</button>
</body>

例子!

据我所知,你的html没有问题。当你创建一个循环时,就会出现这个错误,比如当你更新一个被监视的变量,在触发事件函数中你再次更新它。

你能编辑你的问题并展示你的javascript吗?