「angular-google-maps: 有効なセンター プロパティが見つかりませんでした」というエラーが表示されました。php バックエンドからロードされた locationData を $watch し、初期化関数を実行すると。
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 の設定をコントローラ ブロックの先頭に移動し、定数値をマップに設定します。
center: {
latitude: 0,
longitude: 0
},
、地図が正しく表示されます。
角度コントローラー:
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マップディレクティブを解析し、バックエンドの緯度、経度データでマップを正しく表示するにはどうすればよいですか?