Question

问题

在我的AngularJS控制器中，我使用$http服务从RESTful API（本例中为Google Maps API）请求一些位置数据。请求成功后，我想更新Google地图并设置地图的中心位置。在我的示例中，地图位置参数不会从我的控制器接收任何更新。

我尝试了什么

我试图在成功回调的内外移动$scope.options，但两者都不适合我。地图没有收到位置数据。我想我在成功回调处理程序中使用了错误的$scope。我不知道如何解决这个问题，也无法在这里找到任何类似的问题。

控制器：

angular.module('simple-map', ['AngularGM'])

.controller('SimpleMapCtrl', function($scope, $http) {

    $scope.location = {};

    $http.get('http://maps.googleapis.com/maps/api/geocode/json?address=San%20Francisco%20Bicycle%20Route%2060,%20San%20Francisco,%20Kalifornien,%20USA&sensor=false')
    .success(function(res) {
        $scope.location = res.results[0].geometry.location;
        console.log($scope.location.lat); // 37.7502819
        console.log($scope.location.lng); // -122.3874909

        $scope.options = {
          map: {
            center: new google.maps.LatLng(
                        $scope.location.lat,
                        $scope.location.lng
             ),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.TERRAIN
          }
        };

    });  

});

实施例

http://jsfiddle.net/PwkLU/3/

Answer 1

您使用的gmMap指令似乎没有在gm-map-options属性上观察您正在加载中心和缩放的更改 - 这些更改仅用于初始化（并且您的数据不是'准备初始化，因为在get成功之前你没有设置它。

然而，该指令确实根据to the docs观察中心和缩放：

gm-center，gm-zoom，gm-bounds和 gm-map-type-id变量......有双向关联，即拖动或缩放地图，他们会更新，更新它们，地图也会改变。

因此，如果您使用gm-map-options将中心和缩放options属性分配给gm-center和gm-zoom，而不是使用<gm-map gm-map-id="'simpleMap'" gm-center="options.map.center" gm-zoom="options.map.zoom" class="map" gm-map-options="options.map">，那么它是有效的：

{{1}}

Updated fiddle

成功$ http回调后设置地图位置

问题

我尝试了什么

实施例

1 个答案: