English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML5 Tutoriel de base

HTML5 API

HTML5 Media

HTML5 Graphics

HTML5 Geolocation

HTML5 Geolocation (geolocation) is used to locate the user's location.

Locate the user's location

HTML5 The Geolocation API is used to obtain the user's geographical location.

Since this feature may infringe on user privacy, user location information is not available unless the user agrees.

Browser Support

Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geolocation (geolocation).

Note: Geolocation (geolocation) is more accurate for devices with GPS, such as iPhone.

HTML5 - Using Geolocation

Use the getCurrentPosition() method to obtain the user's location.

The following is a simple example of geolocation that can return the longitude and latitude of the user's location:

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Base Tutorial Website(oldtoolbag.com)</</title>　
</</head>
<body>
<p id="demo">Cliquez sur le bouton pour obtenir vos coordonnées actuelles (peut nécessiter un certain temps pour être récupérées) :</</button>
<button onclick="getLocation()">Cliquez sur moi</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
　　　　if (navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="Ce navigateur ne prend pas en charge l'obtention de la géolocalisation.";
　　　　}
}
function showPosition(position)
{
　　　　x.innerHTML="Latitude:　"　+　position.coords.latitude　+　
　　　　"<br>Longitude:　"　+　position.coords.longitude;　　　　
}
</script>
</body>
</html>
Testez pour voir ‹/›

Analyse de l'exemple:

  • Vérification de la prise en charge de la géolocalisation

  • Si getCurrentPosition() est pris en charge, exécutez la méthode getCurrentPosition(). Sinon, affichez un message à l'utilisateur.

  • Si getCurrentPosition() s'exécute avec succès, un objet coordinates est renvoyé à la fonction spécifiée dans le paramètre showPosition

  • La fonction showPosition() obtient et affiche la latitude et la longitude

L'exemple ci-dessus est un script de géolocalisation de base, sans gestion des erreurs.

Gestion des erreurs et des refus

Le deuxième paramètre de la méthode getCurrentPosition() est utilisé pour gérer les erreurs. Il spécifie la fonction à exécuter lorsque la récupération de la position de l'utilisateur échoue :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Tutoriel de base(oldtoolbag.com)</</title>　
</</head>
<body>
<p id="demo">Cliquez sur le bouton pour obtenir vos coordonnées actuelles (peut nécessiter un certain temps pour être récupérées) :</</button>
<button onclick="getLocation()">Cliquez sur moi</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
　　　　if (navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition,showError);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="Ce navigateur ne prend pas en charge la localisation.";
　　　　}
}
function showPosition(position)
{
　　　　x.innerHTML="Latitude:　"　+　position.coords.latitude　+　
　　　　"<br>Longitude:　"　+　position.coords.longitude;　　　　
}
function showError(error)
{
　　　　switch(error.code)　
　　　　{
　　　　　　　　case error.PERMISSION_DENIED:
　　　　　　　　　　　　x.innerHTML="L'utilisateur a refusé la demande d'obtention de la position géographique.";
　　　　　　　　　　　　break;
　　　　　　　　case error.POSITION_UNAVAILABLE:
　　　　　　　　　　　　x.innerHTML="L'information de position est indisponible.";
　　　　　　　　　　　　break;
　　　　　　　　case error.TIMEOUT:
　　　　　　　　　　　　x.innerHTML="Le demandage de la géolocalisation de l'utilisateur a expiré."
　　　　　　　　　　　　break;
　　　　　　　　case error.UNKNOWN_ERROR:
　　　　　　　　　　　　x.innerHTML="Erreur inconnue."
　　　　　　　　　　　　break;
　　　　}
}
</script>
</body>
</html>
Testez pour voir ‹/›

Code d'erreur :

  • Permission refusée - Le utilisateur n'autorise pas la géolocalisation

  • Position non disponible - Impossible d'obtenir la position actuelle

  • Timeout - Dépassement du délai d'exécution

Affichage des résultats sur la carte

Pour afficher les résultats sur la carte, vous devez accéder à un service de carte utilisant des coordonnées géographiques, comme Google Maps ou Baidu Maps :

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Tutoriel de base(oldtoolbag.com)</</title>　
</</head>
<body>
<p id="demo">Cliquez sur le bouton pour obtenir vos coordonnées actuelles (peut nécessiter un certain temps pour être récupérées) :</</button>
<button onclick="getLocation()">Cliquez sur moi</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
{
　　　　if (navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.getCurrentPosition(showPosition,showError);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="Ce navigateur ne prend pas en charge l'obtention de la géolocalisation.";
　　　　}
}
function showPosition(position)
{
　　　　var latlon=position.coords.latitude+","+position.coords.longitude;
　　　　var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
　　　　+latlon+"&zoom=14&size=400x300&sensor=false";
　　　　document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>";
}
function showError(error)
{
　　　　switch(error.code)　
　　　　{
　　　　　　　　case error.PERMISSION_DENIED:
　　　　　　　　　　　　x.innerHTML="L'utilisateur a refusé la demande d'obtention de la position géographique.";
　　　　　　　　　　　　break;
　　　　　　　　case error.POSITION_UNAVAILABLE:
　　　　　　　　　　　　x.innerHTML="L'information de position est indisponible.";
　　　　　　　　　　　　break;
　　　　　　　　case error.TIMEOUT:
　　　　　　　　　　　　x.innerHTML="Le demandage de la géolocalisation de l'utilisateur a expiré."
　　　　　　　　　　　　break;
　　　　　　　　case error.UNKNOWN_ERROR:
　　　　　　　　　　　　x.innerHTML="Erreur inconnue."
　　　　　　　　　　　　break;
　　　　}
}
</script>
</body>
</html>
Testez pour voir ‹/›

Dans l'exemple précédent, nous utilisons les données de latitude et de longitude retournées pour afficher la position sur la carte Google (en utilisant des images statiques).

Script Google Maps
Les liens ci-dessus vous montrent comment utiliser des scripts pour afficher des cartes interactives avec des options de marqueur, de zoom et de glisser-déposer.

Informations sur l'emplacement donné

Cette page montre comment afficher la position de l'utilisateur sur une carte. Cependant, la géolocalisation est également très utile pour obtenir des informations sur un emplacement donné.

Exemple:

  • Mettre à jour les informations locales

  • Afficher les points d'intérêt autour de l'utilisateur

  • Système de navigation embarqué interactif (GPS)

Méthode getCurrentPosition() - Retour des données

Si succès, la méthode getCurrentPosition() retourne un objet. Elle retourne toujours les propriétés latitude, longitude et accuracy. Si disponibles, d'autres propriétés suivantes peuvent être retournées.

PropriétéDescription
coords.latitudeLatitude en nombre décimal
coords.longitudeLongitude en nombre décimal
coords.accuracyPrécision de la position
coords.altitudeAltitude, en mètres au-dessus du niveau de la mer
coords.altitudeAccuracyPrécision d'altitude de la position
coords.headingDirection, en degrés à partir du nord
coords.speedVitesse, en mètres/Compte à chaque seconde
timestampDate de la réponse/Temps

Objet Geolocation - Autres méthodes intéressantes

watchPosition() - Retourner la position actuelle de l'utilisateur et continuer à retourner les mises à jour de la position du déplacement de l'utilisateur (comme un GPS dans une voiture).

clearWatch() - Arrêter la méthode watchPosition()

L'exemple suivant montre la méthode watchPosition(). Vous avez besoin d'un appareil GPS précis pour tester cet exemple (par exemple, iPhone):

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Tutoriel de base(oldtoolbag.com)</</title>　
</</head>
<body>
<p id="demo">Cliquez sur le bouton pour obtenir vos coordonnées actuelles (peut nécessiter un certain temps pour être récupérées) :</</button>
<button onclick="getLocation()">Cliquez sur moi</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
　　　　if (navigator.geolocation)
　　　　{
　　　　　　　　navigator.geolocation.watchPosition(showPosition);
　　　　}
　　　　else
　　　　{
　　　　　　　　x.innerHTML="Ce navigateur ne prend pas en charge l'obtention de la géolocalisation.";
　　　　}
}
function showPosition(position)
{
　　　　x.innerHTML="Latitude:　"　+　position.coords.latitude　+　
　　　　"<br>Longitude:　"　+　position.coords.longitude;　　　　
}
</script>
</body>
</html>
Testez pour voir ‹/›
HTML5 Video(vidéo)HTML5 Glisser-déposer