Javascript 角度谷歌地图:加载位置数据(Lat、Lng)后如何加载地图?
我得到了一个错误: “谷歌地图:找不到有效的中心属性”。 当我从php后端和exec初始化函数中加载我的locationData时 HTML: 然后,我将$scope.map设置移动到控制器块的顶部,并将常量值设置为mapJavascript 角度谷歌地图:加载位置数据(Lat、Lng)后如何加载地图?,javascript,angularjs,google-maps,google-maps-api-3,angular-google-maps,Javascript,Angularjs,Google Maps,Google Maps Api 3,Angular Google Maps,我得到了一个错误: “谷歌地图:找不到有效的中心属性”。 当我从php后端和exec初始化函数中加载我的locationData时 HTML: 然后,我将$scope.map设置移动到控制器块的顶部,并将常量值设置为map center: { latitude: 0, longitude: 0 }, ,地图显示正确 角度控制器: app.controller('MapCtrl', ['$scope', function ($scope) { 'use strict';
center: {
latitude: 0,
longitude: 0
},
,地图显示正确
角度控制器:
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,
};
}
}]);
app.controller('MapCtrl', ['$scope', function ($scope) {
'use strict';
var mapOptions = {
panControl : true,
zoomControl : true,
scaleControl : true,
mapTypeControl: true,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
$scope.map = {
center: {
latitude: 0,
longitude: 0
},
zoom: 13,
options: mapOptions,
};
}]);
如何在加载数据后解析google map指令,并使用后端Lat、Lng数据正确显示地图 我建议另一种选择
中心
设置为:
center: {
latitude: $scope.location.lat,
longitude: $scope.location.lng
},
应该是这样的:
center: new google.maps.LatLng($scope.location.lat, $scope.location.lng),
如果lat/lng是数字。如果不是,您必须使用parseFloat()。最后,我使用ng If
,并在映射初始化后将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>
您的中心是google map api的值,而不是google map api的值。角度谷歌地图的中心细节:作为表示地图中心的对象计算的表达式。对象必须具有纬度和经度数字属性。+1。我使用了ng show
来隐藏地图,直到我准备好显示它,它不知何故弄乱了画布。如果
有效,则将其更改为ng。
center: new google.maps.LatLng($scope.location.lat, $scope.location.lng),
<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>