Angular UI 地图未针对范围更改进行更新

Question

我正在尝试在范围更改时更新 Angular ui-map。我添加了一个 $watch，我可以在控制台中看到范围发生变化，但地图不会随着纬度和经度的变化而更新。这是我的：

        $scope.mapOptions = {
                    zoom: 4,
                    center: new google.maps.LatLng(-25.363882,131.044922),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var updateCenter = function() {
                    $scope.mapOptions = {
                        zoom: 11,
                        center: new google.maps.LatLng($scope.fromLat, $scope.fromLng),
                    };
                    console.log($scope.mapOptions);
              }
              $scope.$watch('fromLat', updateCenter);
              $scope.$watch('fromLng', updateCenter);

其中 $scope.fromLat 和 $scope.fromLng 是我正在观察的范围变化。当我在控制台中记录这些范围时，我可以看到更新的范围。但是地图还处于初始状态。

Answer 1

好的，这就是我为解决这个问题所做的。我做了 2 处更改：

1) 在控制器中使用了 setCentre():

在updateCenter()方法中，我没有更新$scope.mapOptions，而是使用setCenter()直接改变地图中心。

var updateCenter = function() {
    $scope.myMap.setCenter(new google.maps.LatLng($scope.fromLat, $scope.fromLng));
}

这里，myMap是添加到ui-map的作用域，像这样：

div ui-map="myMap" ui-options="mapOptions" class="google-map"></div>

2) 视图或 $watch 中的 ng-change:

其次，我添加了一个$watch用于即时更新地图。有两种方式：

当纬度和经度范围发生变化时，我可以将 ng-change 属性添加到调用上述函数的输入范围。这样地图更改会立即生效。 <input id="fromLat" type="text" ng-model="fromLat" ng-change="updateMap()" name="fromLat" />
或者在控制器中添加一个$watch： $scope.$watch('fromLat', updateCenter);

Angular UI 地图未针对范围更改进行更新

Angular UI Map Not Updating for Scope Changes

google-maps

angularjs

angular-ui