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

【问题标题】：Angular-Google-Map: How to Load Map after Position Data Loaded(Lat, Lng)?Angular-Google-Map：加载位置数据（Lat，Lng）后如何加载地图？
【发布时间】：2014-03-05 16:07:30
【问题描述】：

我得到了错误： 'angular-google-maps：找不到有效的中心属性'。当我 $watch 从 php 后端加载的 locationData 并执行初始化函数时。

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

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

【问题讨论】：

标签： javascript angularjs google-maps google-maps-api-3 angular-google-maps

【解决方案1】：

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

有效。

【讨论】：

+1。我使用ng-show 隐藏地图，直到我准备好显示它并且它以某种方式弄乱了画布。将其更改为 ng-if 有效。

【解决方案2】：

我建议替代方案，ng-map。

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

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

【讨论】：

【解决方案3】：

center 设置为：

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

应该是这样的：

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

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

【讨论】：

您的中心是 google map api 的价值，而不是 Angular-google-map api。 Angular-google-map 的中心详细信息：要评估为表示地图中心的对象的表达式。对象必须具有纬度和经度数值属性。