Comment puis-je utiliser la géolocalisation HTML5 dans angularjs

Comment puis-je utiliser la géolocalisation HTML5 dans angularjs? Je peux l'obtenir à l'aide de HTML5; mais comment puis-je passer à angularjs champ d'application dans le contrôleur? tout échantillon jsfiddle permettra de sauver ma journée!

InformationsquelleAutor AngryJS | 2014-04-20
  1. 34

    vous pouvez faire quelque chose

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

    vous avez besoin de faire $scope.$appliquer pour déclencher le digest du cycle lorsque la géolocalisation arrive et mettre à jour tous les observateurs de.

    • peut-u s'il vous plaît m'aider avec jsfiddle?? si u ne pas l'esprit, je suis un newbie sur angularjs et havent utilisé montre encore. si pas, je n'ai pas l'esprit 🙂
    • si vous créez un squelette jsfiddle ou plunkr je peux le remplir, mais vous avez à faire le travail vous-même
    • Bien sûr, donnera u un squelette! merci!
    • il a travaillé comme u suggéré! merci! 🙂
    • regarder votre étape de travail avec cet extrait! dans certains types de navigateurs, il renvoie une alerte de sécurité et de Chrome(50+) navigator.geolocation n'est pas pris en charge sans https!
    InformationsquelleAutor Vladimir Gurovich
  2. 63

    Je vous suggère de l'abstraction en service, de sorte que votre contrôleur ne pas avoir une dépendance sur la fenêtre.navigator, et pour éviter l'utilisation inutile de $scope.$appliquer(). Voici ce que j'utilise dans mon projet:

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

    Puis je le en consommer dans mon contrôleur comme ceci:

    function captureUserLocation() {
    geolocationSvc.getCurrentPosition().then(onUserLocationFound);
}
    • Cela devrait être la réponse, il favorise le découplage et montre une bonne utilisation de la programmation asynchrone.
    • Même si c'est un vieux message, je le trouve très utile pour la mise en route à l'aide de la géolocalisation. Me demande comment faire pour tester erreur et ne comprends pas votre onUserLocationFound fonction ci-dessus, quelle manipulation faut-il faire et comment faut-il gérer l'erreur?
    • La mise en œuvre renvoie une promesse résolu avec la position de l'utilisateur (deferred.resolve(position)), de sorte que votre gestionnaire d'une fonction de réception de données, par exemple onUserLocationFound(position) { ... }. si vous souhaitez gérer la géolocalisation des erreurs, vous pouvez utiliser une catch comme n'importe quel autre promesse.
    InformationsquelleAutor Jared
  3. 2

    Vous pouvez utiliser ngGeolocation. Il est simple et fait le travail.

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

    En raison de firefox est question de ne pas obtenir de la rétroaction de l'utilisateur sur invite besoins de site web pour accéder à votre emplacement lorsque l'utilisateur en cliquant sur "Pas maintenant", X ou à l'extérieur de boîte de message d'invite (plus ici), ci-dessous, un petit exemple pour déclencher l'action de secours pour ce cas. 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;
});

    Et votre 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.');
            }
        }
    );
});
    • Je ne recommanderais pas cette approche. Il est impossible de n'en choisir un délai approprié pour tous les scénarios, et je ne voudrais pas obstacle à la géolocalisation tout simplement parce que le visiteur n'a pas répondu assez vite. Au lieu de cela, j'avais la conception de mon expérience de l'utilisateur pour accueillir n'ayant pas l'emplacement de l'utilisateur, indépendamment de la raison. Et si vraiment vous NE voulez que ce comportement, je ne le mettrais pas dans le service de géolocalisation; il faut aller dans le contrôleur de consommer ce service.
    InformationsquelleAutor Muhammad Reda