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）在Controller中使用了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：

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

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

范围更改的角度UI地图未更新

1 个答案: