javascript - 在 AngularJS 脚本中使用 $scope 变量

Question

我正在使用 AngularJS，Ionic Framework和 Cordova 。我尝试将当前用户位置设置在 map 中心。

这是我的代码:

.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，你可以用 Promise 很好地做到这一点

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