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来做到这一点

working plunker

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

我确定这是因为您在设置之前尝试访问coords，这是异步发生的。

可能它在代码中的其他地方工作只是因为在运行代码之前存在延迟，这足以设置坐标。这被称为竞争条件。

您可以在回调函数中设置coords的值，如下所示。

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

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

}

在AngularJS脚本中使用$ scope变量

2 个答案: