在AngularJS腳本中使用$ scope變量

Question

我正在使用AngularJS， Ionic Framework和Cordova。 我試圖在地圖中心設置當前用戶位置。

這是我的代碼：

.controller('mainCtrl', function($scope) {
    $scope.position = "";
    var latLng = {};
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        $scope.$apply(function() {
          $scope.position = position;
          latLng = {
            'lat': position.coords.latitude,
            'lng': position.coords.longitude
          };
        });
      });
    };
    $scope.map = {
      center: {
        latitude: 51.219053,
        longitude: 4.404418
      },
      ...

我可以在腳本外以這種方式打印當前用戶位置：

clat: {{position.coords.latitude}}, clang: {{position.coords.longitude}}

但是我想在腳本中使用它。 我嘗試了這些但沒有成功：

center: { latitude: position.coords.latitude,...
center: { latitude: $scope.position.coords.latitude,...
center: { latitude: latLng.lng,...
center: { latitude: latLng['lng'],...

如何在腳本中使用它？

---

錯誤日志：

TypeError: Cannot read property 'latitude' of undefined

Answer 1

如果您想在獲得坐標后初始化googleMaps，則可以通過promises很好地完成

工作鑽

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $q) {
  var deferredBrowserLocation = $q.defer()

  getBrowserLocation = function() {
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log(position.coords)
      deferredBrowserLocation.resolve(position)

    })
    return deferredBrowserLocation.promise
  }

  getBrowserLocation().then(function(position) {
    $scope.map = {
      center: {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      }
    }
  }).finally(function(){
    //initialize googlemaps with $scope.map
  })
});

Answer 2

我確定這是因為您嘗試在設置坐標之前訪問坐標，這是異步發生的。

可能是因為它在代碼運行之前有一個延遲，這足以在代碼中的其他地方起作用，這足以設置坐標。 這被稱為競爭條件。

您可以通過如下所示的回調函數從坐標中設置值。

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position){

     //Check coords is not undefined and then build the center object
}

}