7

「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マップディレクティブを解析し、バックエンドの緯度、経度データでマップを正しく表示するにはどうすればよいですか?

4

3 に答える 3