Как я могу использовать геолокацию HTML5 в angularjs? Я могу получить его с помощью HTML5; но как я могу передать его в область angularjs в контроллере? любой образец jsfiddle сохранит мой день!
Как я могу использовать геолокацию HTML5 в angularjs
Ответ 1
вы можете что-то сделать
myApp.controller('fooCtrl', function($scope){
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
$scope.$apply(function(){
$scope.position = position;
});
});
}
})
вам нужно сделать $scope. $apply, чтобы вызвать цикл дайджеста, когда прибыла геолокация и обновить всех наблюдателей.
Ответ 2
Я бы предложил абстрагировать это на службу, чтобы у вашего контроллера не было зависимости от window.navigator и чтобы избежать ненужного использования $scope. $apply(). Вот что я использую в своем проекте:
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);
}
Ответ 3
Вы можете использовать ngGeolocation
. Это просто и выполняет эту работу.
angular.module('appName', ['ngGeolocation'])
.controller('appCtrl', function($scope, $geolocation) {
$geolocation.getCurrentPosition().then(function(position) {
console.log(position, 'current position');
});
});
Ответ 4
Из-за проблемы с firefox не получают отзывов от пользователя о том, что веб-сайт должен получить доступ к вашему местоположению, когда пользователь нажимает "Не сейчас", X или внешнюю строку приглашения (подробнее здесь), ниже представлен крошечный пример для запуска резервного действия для этого случая. 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;
});
И ваше приложение 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.');
}
}
);
});