Angular-Google-Map：如何在加载位置数据后加载地图（Lat，Lng）？

I got the error: 'angular-google-maps: could not find a valid center property'. when I $watch my locationData loaded from php backend and exec initialize function.

我收到错误:'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>

Angular Controller:

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,
        };
    }
}]);

And, I move $scope.map settings to the top of the controller block and set constant value to map

并且,我将$ scope.map设置移动到控制器块的顶部,并将常量值设置为map

center: {
    latitude: 0,
    longitude: 0
},

, map show correctly.

,地图显示正确。

Angular Controller:

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,
    };
}]);

How can do google map directive parse after data loaded and show map correctly with backend Lat, Lng data?

如何在加载数据后使用谷歌地图指令解析并使用后端Lat,Lng数据正确显示地图?

3 个解决方案

#1

Finally, I use ng-if, and change map.isReady value from false to true after map initialize.

最后,我使用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>

It works.

#2

I suggest alternative, ng-map.

我建议替代,ng-map。

<map center="[<?=$data.latiude?>, <?=$data.longitude?>]" zoom="12" />

I created this directive, so it should work this way, and I believe this is the AngularJS way.

我创建了这个指令,所以它应该以这种方式工作,我相信这是AngularJS的方式。

#3

center is set as:

中心设置为:

        center: {
            latitude: $scope.location.lat,
            longitude: $scope.location.lng
        },

It should be like:

应该是这样的:

        center: new google.maps.LatLng($scope.location.lat, $scope.location.lng),

if lat/lng are numbers. If not that you have to use parseFloat().

如果lat / lng是数字。如果不是,你必须使用parseFloat()。

#1