Angular-Google-Map：載入位置數據後如何加載地圖（Lat，Lng）？

我得到了錯誤： '角度谷歌地圖：找不到有效的中心屬性'。當我觀看我的位置數據從PHP後端加載和exec初始化函數。Angular-Google-Map：載入位置數據後如何加載地圖（Lat，Lng）？

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

如何才能做到谷歌地圖指令解析後，加載數據和顯示地圖正確與後端緯度，經度數據？

來源

2014-02-08 Chen-Tsu Lin

最後我在地圖初始化後使用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>

它的工作原理。

來源

2014-02-08 14:59:35

+1。我用'ng-show'來隱藏地圖，直到我準備好顯示它，並以某種方式弄亂了畫布。將其改爲'ng-if'即可。 –

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

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

我創建了這個指令，所以它應該以這種方式工作，我相信這是AngularJS方式。

來源

2014-02-08 05:12:00 allenhwkim

center設置爲：

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

應該是這樣：

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

如果緯度/經度是數字。如果不是你必須使用parseFloat（）。

來源

2014-02-08 08:46:47

您的中心是谷歌地圖api的價值，而不是Angular-google-map api。 Angular-google-map的中心細節：用於評估表示地圖中心的對象的表達式。該對象必須具有經度和緯度數值屬性。 –

對不起，錯誤的'提示'，不知道。 –

Angular-Google-Map：載入位置數據後如何加載地圖（Lat，Lng）？

回答

相關問題