angularjs에서 HTML5 지올로케이션을 사용하는 방법

angularjs에서 HTML5 지올로케이션을 사용하는 방법

angularjs에서 HTML5 지오로케이션을 사용하려면 어떻게 해야 하나요?HTML5로 취득할 수 있는데 컨트롤러의 angularjs 스코프에 전달하려면 어떻게 해야 하나요?어떤 샘플 jsfiddle이라도 나를 구할 수 있어!

컨트롤러가 window.navigator에 의존하지 않고 $scope를 불필요하게 사용하지 않도록 이를 서비스로 추상화하는 것이 좋습니다.145달러제 프로젝트에서 사용하고 있는 것은 다음과 같습니다.

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

다음으로 컨트롤러에서 다음과 같이 소비합니다.

function captureUserLocation() {
    geolocationSvc.getCurrentPosition().then(onUserLocationFound);
}

당신은 무엇을 할 수 있다

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

당신은 $second를 해야 합니다.$120: 지리정보가 도착했을 때 다이제스트 사이클을 트리거하고 모든 워처를 업데이트합니다.

를 사용할 수 있습니다.그것은 간단하고 일을 한다.

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

사용자가 "Not now", "X" 또는 outside 프롬프트 상자(자세한 내용은 여기)를 클릭했을 때 해당 웹 사이트가 사용자의 위치에 액세스해야 하는 경우 Firefox의 문제로 인해 이 경우에 폴백 액션을 트리거하는 작은 예를 아래에 나타냅니다.플런커

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

그리고 당신의 앱 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.');
            }
        }
    );
});

언급URL : https://stackoverflow.com/questions/23185619/how-can-i-use-html5-geolocation-in-angularjs