Question

这是我的控制器和一项获得纬度和纵向的服务。

var moduloMapa = angular.module('BeLiga.indexMapControllers', ['google-maps']);

moduloMapa.controller('controlIndexMap', function($scope, mapService) {

    $scope.center = {
        latitude: 30,
        longitude: 20
    };
    $scope.zoom = 8;

    $scope.latitud = mapService.localizar();

});

moduloMapa.service('mapService', function() {

    this.localizar = function() {
        navigator.geolocation.getCurrentPosition(mostrar);
    };

    function mostrar(posicion) {
        /* posicion es el parametro que tiene los valores, las variables para latitud y longitud las obtenemos del parametro posicion.coords*/
        var lat = posicion.coords.latitude; //obtengo la latitud
        var lon = posicion.coords.longitude; //obtengo la longitud
        alert("Te he encontrado, estas en: " + lat + " , " + lon);
        return "lat";

    }
    ;
});

问题是：当我查看范围变量＆＃34; $ scope.latitud＆＃34;在浏览器中它是空的，我不知道为什么。

如何在$ scope控制器中获取纬度和纵向？

我是angularJS的初学者，感谢您的关注。

Answer 1

您应该使用promises来解决此问题。

module.service('positionService', function($q, $rootScope) {
  return {
    getPosition: function() {
      var deferred = $q.defer();
      navigator.geolocation.getCurrentPosition(function(position) {
        //console.log(position);
        $rootScope.$apply(function(){deferred.resolve(position);});
      });
      return deferred.promise;
    }
  }
});

使用控制器中的服务：

positionService.getPosition().then(function(position) {
  $scope.position = position;
});

您也可以直接将承诺分配给您的范围，Angular会自动为您解决：

$scope.position = positionService.getPosition();

看看这个fiddle。

Answer 2

问题是getCurrentPosition是异步运行的。

尝试这样

moduloMapa.service('mapService', function() {
    this.localizar = function() {
        var coords = { lat: 0, lon: 0 };
        navigator.geolocation.getCurrentPosition(function(posicion) {
            cords.lat = posicion.coords.latitude;
            cords.lon = posicion.coords.longitude;
        });
        return coords;
    };    
});

一旦浏览器获得了coords，它们就可以在控制器的范围内使用。

 $scope.latitud = mapService.localizar().lat;

<强>更新

对于错字，我已经创建了一个有效的笨蛋here

我无法获得服务变量angularjs

2 个答案: