HTML Geolocation
Auparavant, Web Storage mémorisait de petites chaînes clé/valeur. Cette leçon quitte l’enregistrement et présente Geolocation : lire latitude/longitude approximatives via navigator.geolocation — seulement après permission. HTML charge un script qui demande la position. Portée pratique — lecture unique, watch/clear, refus poli — pas de SDK cartes ni base geo.
Pourquoi geolocation dans un cours HTML
Les débutants font souvent un bouton « près de moi ». Geolocation est la première API courante. Après web storage, la division diffère : HTML possède l’enveloppe et le bouton ; JS demande les coordonnées. Suffisent getCurrentPosition, connaître watchPosition et gérer le refus.
Réponse directe
1) Appelez getCurrentPosition. 2) Lisez latitude/longitude. 3) Préférez un clic utilisateur avant. 4) watchPosition pour les mises à jour ; clearWatch. 5) Aucune balise HTML. 6) En cas de refus, gardez la page utile.
📊 getCurrentPosition vs watchPosition
| Topic | getCurrentPosition | watchPosition |
|---|---|---|
| Typical use | One-shot “where am I now” | Ongoing updates while watching |
| Callback pattern | success once (plus optional error) | success may fire repeatedly |
| Stop watching | Not needed (single read) | clearWatch(watchId) |
| Beginner fit | Share-location button | Live tracking demos (careful) |
| Permission | Still required | Still required |
| This course depth | Intro focus | Short demo + clearWatch only |
Minuscule démo getCurrentPosition
Un clic demande la position et affiche les coordonnées. Si refus ou API absente : message calme.
<button id="loc" type="button">Share location</button>
<pre id="out"></pre>
<script>
const out = document.getElementById("out");
document.getElementById("loc").onclick = function () {
if (!navigator.geolocation) {
out.textContent = "No geolocation support";
return;
}
out.textContent = "Waiting for permission…";
navigator.geolocation.getCurrentPosition(
function (pos) {
out.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
out.textContent = "Permission denied or unavailable";
}
);
};
</script>
Lire les appels getCurrentPosition
- navigator.geolocation est le point d’entrée
- getCurrentPosition demande une fois
- latitude/longitude sont les premiers nombres
- Détectez le support d’abord
- Le callback d’erreur couvre le refus
- Préférez HTTPS
- Contrairement à Web Storage : lecture, pas stockage
watchPosition pour mises à jour continues
Le succès peut se déclencher au mouvement. Gardez l’id et clearWatch — ne laissez pas de watches éternels en intro.
<button id="start" type="button">Watch location</button>
<button id="stop" type="button">Stop watching</button>
<pre id="live"></pre>
<script>
const live = document.getElementById("live");
let watchId = null;
document.getElementById("start").onclick = function () {
if (!navigator.geolocation) {
live.textContent = "No geolocation support";
return;
}
if (watchId !== null) {
return;
}
live.textContent = "Watching…";
watchId = navigator.geolocation.watchPosition(
function (pos) {
live.textContent =
pos.coords.latitude + ", " + pos.coords.longitude;
},
function () {
live.textContent = "Permission denied or unavailable";
watchId = null;
}
);
};
document.getElementById("stop").onclick = function () {
if (watchId !== null) {
navigator.geolocation.clearWatch(watchId);
watchId = null;
live.textContent = "Stopped watching";
}
};
</script>
Lire l’idée watchPosition
- Même modèle de permission
- Le succès peut se répéter
- clearWatch arrête — offrez Stop
- Pas une bibliothèque de cartes
- Pas Web Storage
- Choisissez get vs watch selon la fréquence
- Ensuite : drag and drop
Quand demander
- Clic « Partager la position » : bon moment
- Au chargement sans contexte : souvent mauvais
- Mouvement continu : watchPosition avec arrêt
- Préférence de thème : c’était Web Storage
- Produit carto complet : hors de cette intro
- Suivi silencieux : anti-motif
Pratique — demander un fix poliment
- Collez la démo getCurrentPosition et testez le prompt.
- Confirmez coordonnées ou message calme.
- Testez watch puis Stop.
- Optionnel : refusez sans planter.
- Phrase : Web Storage enregistre des chaînes ; Geolocation lit avec permission.
- Servez en http(s) si besoin.
- Aperçu : drag and drop.
Erreurs faciles
- Attendre une balise geolocation
- Demander à chaque chargement
- Ignorer le callback d’erreur
- Confondre avec Web Storage
- Laisser watch sans clearWatch
- Supposer un GPS toujours précis
- Prendre l’intro pour un cours de cartes
Résumé
- Geolocation est une API JS à permission sur navigator.geolocation
- getCurrentPosition une fois ; watchPosition + clearWatch pour les mises à jour
- HTML fournit l’UI ; demandez après une action claire
- Gérez le refus avec douceur
- Web Storage était des chaînes ; cette leçon des coordonnées autorisées
- Suivant : drag and drop en HTML
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut