javascript - $http回调成功后设置 map 位置

Question

问题

在我的 AngularJS Controller 中，我使用 $http 服务从 RESTful API(本例中为 Google Maps API)请求一些位置数据。请求成功后，我想更新我的谷歌地图并设置 map 的中心位置。在我的示例中， map 位置参数没有从我的 Controller 接收到任何更新。

我尝试了什么

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

Controller :

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 进行居中和缩放。 :

The gm-center, gm-zoom, gm-bounds, and gm-map-type-id variables ... have bi-directional association, i.e. drag or zoom the map and they will update, update them and the map will change.

因此，如果不使用 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">

Updated fiddle