我收到了错误:
‘angular-google-maps:无法找到有效的中心地产’.
当我观察我的locationData从PHP后端和exec初始化函数加载时.
‘angular-google-maps:无法找到有效的中心地产’.
当我观察我的locationData从PHP后端和exec初始化函数加载时.
HTML:
<div ng-init="locationData = '<?=htmlspecialchars($data)?>'"> <google-map center="map.center" zoom="map.zoom" options="map.options"></google-map> </div>
角度控制器:
app.controller('MapCtrl',['$scope',function ($scope) { 'use strict'; $scope.$watch('locationData',function() { var location = JSON.parse($scope.locationData); $scope.location = { lng : location.longitude,lat : location.latitude initialize(); }); function initialize() { var mapOptions = { panControl : true,zoomControl : true,scaleControl : true,mapTypeControl: true,mapTypeId : google.maps.MapTypeId.ROADMAP }; $scope.map = { center: { latitude: $scope.location.lat,longitude: $scope.location.lng },zoom: 13,options: mapOptions,}; } }]);
并且,我将$scope.map设置移动到控制器块的顶部,并将常量值设置为map
center: { latitude: 0,longitude: 0 },
,地图显示正确.
角度控制器:
app.controller('MapCtrl',function ($scope) { 'use strict'; var mapOptions = { panControl : true,mapTypeId : google.maps.MapTypeId.ROADMAP }; $scope.map = { center: { latitude: 0,longitude: 0 },}; }]);
如何在加载数据后使用谷歌地图指令解析并使用后端Lat,Lng数据正确显示地图?
解决方法
最后,我使用ng-if,并在map初始化后将map.isReady值从false更改为true.
<div ng-init="locationData = '<?=htmlspecialchars($data)?>'"> <div ng-if="map.isReady"> <google-map center="map.center" zoom="map.zoom" options="map.options"></google-map> </div> </div>
有用.