La géolocalisation fait partie des API gravitant autour de HTML5 (Geolocation API Specification) et des nouvelles fonctionnalités introduites par la mobilité.
Il permet au navigateur de pointer votre emplacement actuel. L'API nous permet soit d'effectuer une suivi sur une base ponctuelle ou continu, qui peut être utile dans les situations où le visiteur de votre site est en mouvement.
D'ailleurs, nous allons voir un exemple de code minimal de cette API (Géolocalisation HTML5) avant d'entrer dans les options disponibles.
Voici la démonstration la plus simple exemple que je peux gérer:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Géolocalisation HTML5</title>
</head>
<body>
<script>
(function(geo){
if(geo){
geo.watchPosition(function(location) {
console.log(location);
});
}
})(navigator.geolocation);
</script>
</body>
</html>
Collez ce code dans une page HTML vide, et l'afficher dans le navigateur. Toutefois, vous pouvez constater que rien n'est affiché au navigateur.
Pour que la géolocalisation html5 fonctionne correctement vous devez soit enregistrer le fichier sur votre hébergeur, ou utilisez votre localhost pour accéder à la page - comme WAMP, XAMPP, MAMP, ....
Une fois que vous déplacer le fichier, recharger la page, et le navigateur demander l'accès à suivre votre position géographique.
 |
| Géolocalisation HTML5 |
D'ailleurs, la demande de la permission est nécessaire avant de suivre. Sinon, cela pourrait être un énorme problème de sécurité!
Ensuite, afficher la console, et vous trouverez un objet, qui contient quelque informations:
Test
Comme avec toutes les nouvelles API, nous devons d'abord déterminer si l'API y reconnaît par le navigateur. Comme vous l'avez appris dans l'article de la détection (Feature Detection HTML5).
le test de la géolocalisation html5 est très simple:
if ( navigator.geolocation ) alert('Géolocalisation HTML5 fonctionne :)');
// Ou, avec Modernizr:
if ( Modernizr.geolocation ) alert('Géolocalisation HTML5 fonctionne :)');
Les deux méthodes de base:
L'API Géolocalisation est composé de deux méthodes principales:
1. getCurrentPosition : permettant un ciblage ponctuel
2. watchPosition : pour un suivi continu
Ces deux méthodes sont très semblables, à l'exception watchPosition continuer à mettre à jour votre code. Naturellement, cela devrait être utilisé dans des situations où la position de l'utilisateur est changée en permanence.
getCurrentPosition()
Ces deux méthodes acceptent un, deux, ou trois arguments.
1.
successCallback : exécuter lorsque le navigateur suivi le visiteur.
2.
ErrorCallback : exécuter si la tentative de suivre le visiteur échoue.
3.
PositionOptions : facultatif objet pour les options enableHighAccuracy, timeout, et maximumAge.
Ces arguments peuvent être appliquées, comme ceci:
navigator.geolocation.getCurrentPosition (successCallback, errorCallback, {
enableHighAccuracy: true,
timeout: 15000,
maximumAge: 0
});
Vous pouvez tester ce code pour récupérer votre position:
if ( navigator.geolocation ) {
navigator.geolocation.getCurrentPosition(function(emplacement) {
console.log(emplacement);
});
}
Généralement, les deux propriétés dont vous avez besoin sont latitude et longitude. Nous pouvons identifier ces valeurs à la console, comme suit:
console.log( emplacement.coords.latitude, emplacement.coords.longitude);
watchPosition ()
Cela devrait être la méthode préférée dans la plupart des situations. La différence de base entre getCurrentPosition() et watchPosition() que la dernier continuera en gardant un œil sur la position de l'utilisateur.
watchPosition() retourner une valeur qui identifie la position actuelle. Cela peut être utilisé pour effacer ou stopper ce suivi continu, on utilise la méthode clearWatch():
var watch = navigator.geolocation.watchPosition(function(location) {
});
// Plus tard
navigator.geolocation.clearWatch(watch);
console.log(watch);
Options
enableHighAccuracy : Obtient une position plus précise via GPS.navigator.geolocation.watchPosition(successCallback, errorCallback, {
enableHighAccuracy: true
});
timeout : Durée avant renvoi vers la function d'erreur.navigator.geolocation.watchPosition(successCallback, errorCallback, {
timeout: 15000 // quinze secondes
});
maximumAge : Durée de la mise en cache de la position actuelle de l'utilisateur. Si maximumAge : 0, donc pour chaque chargement de page, une nouvelle position seront acquises. Sinon, après la première demande, le navigateur attendre l'expiration de maximumAge et initialiser une nouvelle position.navigator.geolocation.watchPosition(successCallback, errorCallback, {
maximumAge: 1000 * 60 * 60 // une heure
});
