geolocation : Démo HTML5
Mise à jour : 2020-03-01
Cette API permet la géolocalisation,
elle renvoie principalement la latitude et la longitude, mais aussi d'autres informations (altitude, précision, direction, vitesse, ...)
Cela peut être plus ou moins précis,
en fonction des informations renvoyées par le GPS et le réseau cellulaire (exclusivement pour les smartphones)
ou par le FAI pour les connexions fixes, y compris le Wi-Fi.
API
- getCurrentPosition(succes, erreur, options) : tente d'obtenir l'emplacement de l'appareil.
- succes : fonction utilisant les informations de géolocalisation.
- erreur : fonction traitant les types d'erreurs.
- options :
- enableHighAccuracy : permet d'activer l'utilisation du GPS sur mobile.
- timeout : détermine en millisecondes le délai d'attente maximum d'une réponse (après acceptation de l'utilisateur).
- watchPosition : surveille l'emplacement de l'appareil à intervalles réguliers.
- coords : contient les coordonnées géographiques et d'autres attributs comme par exemple l'altitude.
Notes sur le tuto
- Il est nécessaire d'autoriser l'envoie d'informations pour permettre la géolocalisation.
- La géolocalisation peut prendre quelques secondes.
- Limitations :
- Chrome n'autorise plus la géolocalisation depuis un site non sécurisé et exige le HTTPS, c'est pourquoi la démo ne fonctionne plus avec Chrome et affiche "Accès à la position non autorisé".
- L'altitude n'est rendue que sur les mobiles utilisant le GPS (sur poste fixe, Firefox retourne 0, tandis que les autres navigateurs retournent null).
- Exemples avec carte :
- HTML5 Demos
- Andy Gup
- Rafraîchissement automatique
Exemple de code HTML5
<span id="myPosition"></span> <script> myPosition = document.getElementById("myPosition") function getCoords(position) { lat = position.coords.latitude pos = "Latitude : " + lat + "<br>"; pos += "Longitude: " + position.coords.longitude + "<br>"; pos += "Altitude : " + position.coords.altitude + "<br>"; pos += "Précision: " + position.coords.accuracy + "m"; myPosition.innerHTML = pos; myPosition.className = "ok" } function errorMsg(error) { msg = { 1: "Accès à la position non autorisé", 2: "Position non trouvée", 3: "Délai expiré" } myPosition.innerHTML = msg[error.code] myPosition.className = "ko" } if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(getCoords, errorMsg, {enableHighAccuracy:true, timeout:60*1000}) } else { myPosition.innerHTML = "Géolocalisation non supportée par ce navigateur !" myPosition.className = "ko" } </script>
Démonstration du résultat HTML5
Détection automatique du support HTML5
Librairie JavaScript de détection automatique (attention, comporte quelques faux positifs et faux négatifs)<script src="_html5detect.js"></script> <script>isItemSupported("navigator.geolocation")</script>