Question

如何在angularjs中使用HTML5地理位置？我可以使用HTML5获取它;但是如何将它传递给控制器中的angularjs范围？任何样本jsfiddle都会节省我的一天！

Answer 1

我建议将其抽象为一个服务，这样你的控制器就不会依赖window.navigator，并且避免不必要地使用$ scope。$ apply（）。这就是我在项目中使用的内容：

certs[0].verify

然后我在我的控制器中使用它：

angular.module('app', []).factory('geolocationSvc', ['$q', '$window', function ($q, $window) {

    'use strict';

    function getCurrentPosition() {
        var deferred = $q.defer();

        if (!$window.navigator.geolocation) {
            deferred.reject('Geolocation not supported.');
        } else {
            $window.navigator.geolocation.getCurrentPosition(
                function (position) {
                    deferred.resolve(position);
                },
                function (err) {
                    deferred.reject(err);
                });
        }

        return deferred.promise;
    }

    return {
        getCurrentPosition: getCurrentPosition
    };
}]);

Answer 2

你可以做点什么

myApp.controller('fooCtrl', function($scope){
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position){
      $scope.$apply(function(){
        $scope.position = position;
      });
    });
  }
})

你需要做$ scope。$ apply以在地理定位到达时触发摘要周期并更新所有观察者。

Answer 3

您可以使用ngGeolocation。这很简单，也可以完成工作。

angular.module('appName', ['ngGeolocation'])
    .controller('appCtrl', function($scope, $geolocation) {
         $geolocation.getCurrentPosition().then(function(position) {
            console.log(position, 'current position');
         });
    });

Answer 4

由于firefox的问题没有得到用户的反馈，提示用户点击＆＃34;现在不是＆＃34;，X或外部提示框（more here）时网站需要访问您的位置，下面是一个很小的例子来触发这种情况的后退行动。 Plunker

// GeoLocationService
angular.module('myApp').factory('GeoLocationService', function($q, $window, $timeout) {
    var factoryObj = {};

    factoryObj.getPosition = function() {
        var deferred;
        var promiseTimeout = $timeout(function() {
            deferred.reject(1); // return 1 if browser waited for user input for more than timeout delay
        }, 3000);

        deferred = $q.defer();

        if(!$window.navigator.geolocation) { // check if geoLocation is not supported by browser
            $timeout.cancel(promiseTimeout);
            deferred.reject(false); // return false if geoLocation is not supported
        }
        else { // geoLocation is supported
            $window.navigator.geolocation.getCurrentPosition(function(position) {
                $timeout.cancel(promiseTimeout);
                return deferred.resolve(position);
            }, function(error) {
                $timeout.cancel(promiseTimeout);
                return deferred.reject(error.code || 1);
            });
        }

        return deferred.promise;
    };

    return factoryObj;
});

你的app js。

// App
var app = angular.module('myApp', []).controller('myCtrl', function($scope, $log, GeoLocationService) {
    $scope.position = {};

    GeoLocationService.getPosition().then(
        function(position) { // 
            $scope.position = position;
            $log.debug(position);
        },
        function(errorCode) {
            if(errorCode === false) {
                alert('GeoLocation is not supported by browser.');
            }
            else if(errorCode == 1) {
                alert('User either denied GeoLocation or waited for long to respond.');
            }
        }
    );
});

如何在angularjs中使用HTML5地理定位

4 个答案: