HTML Geolocation
Zuvor speicherte Web Storage kleine Schlüssel/Wert-Zeichenketten. Diese Lektion verlässt das Speichern und stellt Geolocation vor: ungefähre Breite/Länge über navigator.geolocation — nur nach Erlaubnis. HTML lädt ein Skript, das nach Ort fragt. Praxis — einmal lesen, watch/clear, höfliche Ablehnung — kein Karten-SDK oder Geo-DB.
Warum geolocation in einem HTML-Kurs
Anfänger bauen oft einen „in meiner Nähe“-Button. Geolocation ist die übliche erste API. Nach Web Storage ist die Trennung anders: HTML besitzt Hülle und Button; JS fragt Koordinaten. Es reichen getCurrentPosition, Kenntnis von watchPosition und Umgang mit Ablehnung.
Direkte Antwort
1) getCurrentPosition aufrufen. 2) latitude/longitude lesen. 3) Besser nach Nutzerklick fragen. 4) watchPosition nur für laufende Updates; clearWatch. 5) Kein HTML-Tag. 6) Bei Ablehnung Seite nützlich halten.
📊 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 |
Winziges getCurrentPosition-Demo
Ein Klick fordert die Position und zeigt Koordinaten. Bei Ablehnung oder fehlender API: ruhige Meldung.
<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>
Die getCurrentPosition-Aufrufe lesen
- navigator.geolocation ist der Einstieg
- getCurrentPosition fragt einmal
- latitude/longitude sind die ersten Anfängerzahlen
- Zuerst Feature-Detect
- Fehler-Callback deckt Ablehnung ab
- HTTPS bevorzugt
- Anders als Web Storage: Lesen, nicht Speichern
watchPosition für laufende Updates
Erfolg kann bei Bewegung erneut feuern. ID merken und clearWatch — Watches in Intro-Demos nicht ewig laufen lassen.
<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>
Die watchPosition-Idee lesen
- Gleiches Erlaubnis-Modell
- Erfolg kann wiederholt laufen
- clearWatch stoppt — Stop-Button anbieten
- Keine Kartenbibliothek
- Kein Web Storage
- get vs. watch nach Häufigkeit wählen
- Als Nächstes: drag and drop
Wann fragen
- Klick auf „Standort teilen“: guter Zeitpunkt
- Beim Laden ohne Kontext: meist schlecht
- Dauerhafte Bewegung: watchPosition mit Stop
- Theme speichern: war Web Storage
- Volle Map-Produkte: jenseits dieses Intros
- Stilles Tracking: Anti-Pattern
Übung — höflich um einen Fix bitten
- getCurrentPosition-Demo einfügen und Prompt testen.
- Koordinaten oder ruhige Ablehnung prüfen.
- watch starten, dann Stop.
- Optional Ablehnung ohne Absturz.
- Satz: Web Storage speichert Strings; Geolocation liest mit Erlaubnis.
- Über http(s) ausliefern wenn nötig.
- Ausblick: drag and drop.
Typische Fehler
- Geolocation-Tag erwarten
- Bei jedem Laden fragen
- Fehler-Callback ignorieren
- Mit Web Storage verwechseln
- watch ohne clearWatch lassen
- Immer präzises GPS annehmen
- Intro als vollen Kartenkurs nehmen
Zusammenfassung
- Geolocation ist eine erlaubnispflichtige JS-API auf navigator.geolocation
- getCurrentPosition einmal; watchPosition + clearWatch für Updates
- HTML liefert UI; nach klarer Nutzeraktion fragen
- Ablehnung freundlich behandeln
- Web Storage waren Strings; diese Lektion erlaubte Koordinaten
- Als Nächstes: HTML drag and drop
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt