web-dev-qa-db-fra.com

Obtenir la position GPS à partir du navigateur Web

Je développe un site Web pour mobile, là où j'ai intégré Google Maps, je dois remplir le champ "De" de Google Maps de manière dynamique.

Est-il possible d'obtenir la position GPS à partir d'un navigateur Web et de l'indiquer de manière dynamique dans le champ "De" de Google Map?

145
Ganesh

Si vous utilisez Geolocation API , ce serait aussi simple que d’utiliser le code suivant.

navigator.geolocation.getCurrentPosition(function(location) {
  console.log(location.coords.latitude);
  console.log(location.coords.longitude);
  console.log(location.coords.accuracy);
});

Vous pourrez également utiliser l'API de localisation du client de Google .

Ce problème a été abordé dans Est-il possible de détecter la position GPS d'un navigateur mobile? et Obtenir les données de position depuis un navigateur mobile . Vous pouvez trouver plus d'informations ici.

178
dochoffiday

Voir la discussion Comment obtenir les coordonnées GPS dans le navigateur

Là vous avez le lien vers l'exemple d'application Où suis-je? qui fonctionne sur les appareils mobiles. Je l'ai testé sur mon Android et le module GPS a démarré pour obtenir les coordonnées actuelles. Vous pouvez analyser la source sur l'exemple vivant.

J'ai créé un code QR pour un accès rapide depuis un mobile:

Where Am I QR code

44
Danubian Sailor

Pour donner une réponse un peu plus précise. HTML5 vous permet d'obtenir les coordonnées géographiques et fait un travail assez décent. Globalement, la géolocalisation des navigateurs est assez bonne, sauf pour les navigateurs IE7 et IE8 (et Opera Mini). IE9 fait le travail mais est le moins performant. Commander caniuse.com:

http://caniuse.com/#search=geol

De plus, vous avez besoin de l'accord de votre utilisateur pour accéder à son emplacement. Veillez donc à vérifier cela et à donner des instructions correctes au cas où il serait désactivé. Activer spécialement pour Iphone les autorisations pour Safari est un peu fastidieux. 

21
Tosh

Utilisez ceci et vous trouverez toutes les informations sur http://www.w3schools.com/html/html5_geolocation.asp

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}
</script>
8
Ema.H

Il y a l’API GeoLocation , mais la prise en charge du navigateur est plutôt limitée sur le terrain à l’heure actuelle. La plupart des sites concernés par ce type de problèmes utilisent une base de données GeoIP (avec les réserves habituelles concernant l’inexactitude d’un tel système). Vous pouvez également rechercher des services tiers nécessitant la coopération des utilisateurs, tels que FireEagle .

4
Quentin

Observable

/*
  function geo_success(position) {
    do_something(position.coords.latitude, position.coords.longitude);
  }

  function geo_error() {
    alert("Sorry, no position available.");
  }

  var geo_options = {
    enableHighAccuracy: true,
    maximumAge        : 30000,
    timeout           : 27000
  };

  var wpid = navigator.geolocation.watchPosition(geo_success, geo_error, geo_options);
  */
  getLocation(): Observable<Position> {
    return Observable.create((observer) => {
      const watchID = navigator.geolocation.watchPosition((position: Position) => {
        observer.next(position);
      });
      return () => {
        navigator.geolocation.clearWatch(watchID);
      };
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
1
robert king

Utilisons les dernières fonctions fat arrow :

navigator.geolocation.getCurrentPosition((loc) => {
  console.log('The location in lat lon format is: [', loc.coords.latitude, ',', loc.coords.longitude, ']');
})
0
student