Google Maps for Angular指令不起作用

我试图在另一个函数中使用这个Google Maps for AngularJS指令。当我将$ scope.map移动到函数调用的外部并静态设置纬度/经度时，代码将起作用。不过，我想要做的是在我的函数调用中动态设置纬度/经度。下面的代码。Google Maps for Angular指令不起作用

HTML：

<google-map center="map.center" zoom="map.zoom"></google-map>

角控制器：

angular.module('StadiumCtrl', []).controller('StadiumController', function($scope, $rootScope, $routeParams, $sce, Stadia, Instagram, Weather) { 

// pull stadium details from API based on routeParams 
$scope.id = $routeParams.id; 

Stadia.get($scope.id).success(function(response) { 
    $rootScope.logo = response.logo; 

    $scope.homeColors = { 
     "border": "2px solid " + response.sec_hex, 
     "box-shadow": "3px 3px 7px " + response.prim_hex, 
     "margin": "6px", 
     "padding": "0" 
    } 

    $scope.map = { 
     center: { 
      latitude: response.loc[1], 
      longitude: response.loc[0] 
     }, 
     zoom: 8 
    }; 

    // pass loc_id into Instagram API call 
    Instagram.get(response.loc_id).success(function(response) { 
     instagramSuccess(response.loc_id, response); 
    }); 

    // pass city and state into Wunderground API call 
    Weather.get(response.city, response.state).success(function(response) { 
     $rootScope.temp = Math.round(response.current_observation.temp_f); 
    }); 

// Instagram API callback 
var instagramSuccess = function(scope,res) { 
    if (res.meta.code !== 200) { 
     scope.error = res.meta.error_type + ' | ' + res.meta.error_message; 
     return; 
    } 
    if (res.data.length > 0) { 
     $scope.items = res.data; 
    } else { 
     scope.error = "This location has returned no results"; 
    } 
}; 
});

来源

2014-09-20 MattDionis

它看起来像谷歌，地图指令需要在指令被链接的初始值。一旦有默认值，它将响应该范围值的变化。

您可以在动作用下面的代码看到这一点：

$scope.map = {center: {latitude:0,longitude:0}, zoom: 0}; 

$timeout(function() { 
    $scope.map = {center: {latitude: 51.219053, longitude: 4.404418 }, zoom: 14 }; 
}, 1000);

这证明在http://plnkr.co/edit/szhdpx2AFeDevnUQQVFe?p=preview。如果你在$timeout之外注释掉$scope.map作业，地图将不再显示，但如果将第3行返回，将在$ timeout执行时更新地图。

在你的情况，你应该简单地可以添加

$scope.map = { 
    center: { 
     latitude: 0, 
     longitude: 0 
    }, 
    zoom: 0 
};

运行Stadia.get($scope.id).success(function(response) {之前。

来源

2014-09-20 02:37:31 jkjustjoshing

Google Maps for Angular指令不起作用

回答

相关问题