HTML Geolocation API
Geolocation API HTML se používá k nalezení pozice uživatele.
Najděte pozici uživatele
Geolocation API HTML se používá k získání zeměpisné polohy uživatele.
Protože to může ohrozit soukromí, pozice není k dispozici, pokud ji uživatel neschválí.
Poznámka: Geolokace je nejpřesnější pro zařízení s GPS, jako jsou chytré telefony.
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje geolokaci.
API | |||||
---|---|---|---|---|---|
Geolocation | 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Poznámka: Od verze Chrome 50 bude Geolocation API fungovat pouze v zabezpečených kontextech, jako je HTTPS. Pokud je váš web hostován na nezabezpečeném zdroji (jako je HTTP), požadavky na získání polohy uživatele již nebudou fungovat.
Použití geolokace HTML
Metoda getCurrentPosition()
se používá k návratu pozice uživatele.
Níže uvedený příklad vrací zeměpisnou šířku a délku polohy uživatele:
Příklad
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Vysvětlený příklad:
- Zkontrolujte, zda je podporována geolokace
- Pokud je podporována, spusťte metodu getCurrentPosition(). Pokud ne, zobrazte zprávu uživateli
- Pokud je metoda getCurrentPosition() úspěšná, vrátí objekt souřadnic funkci zadané v parametru (showPosition)
- Funkce showPosition() vypíše zeměpisnou šířku a délku
Výše uvedený příklad je velmi základní geolokační skript bez zpracování chyb.
Řešení chyb a odmítnutí
Druhý parametr getCurrentPosition()
metody se používá ke zpracování chyb. Určuje funkci, která se má spustit, pokud se nepodaří získat polohu uživatele:
Příklad
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
Informace specifické pro dané místo
Tato stránka ukazuje, jak zobrazit polohu uživatele na mapě.
Geolokace je také velmi užitečná pro informace specifické pro polohu, jako jsou:
- Aktuální místní informace
- Zobrazení bodů zájmu v blízkosti uživatele
- Podrobná navigace (GPS)
Metoda getCurrentPosition() – Návratová data
Metoda getCurrentPosition()
při úspěchu vrací objekt. Vlastnosti zeměpisné šířky, délky a přesnosti jsou vždy vráceny. Ostatní vlastnosti jsou vráceny, pokud jsou k dispozici:
Property | Returns |
---|---|
coords.latitude | The latitude as a decimal number (always returned) |
coords.longitude | The longitude as a decimal number (always returned) |
coords.accuracy | The accuracy of position (always returned) |
coords.altitude | The altitude in meters above the mean sea level (returned if available) |
coords.altitudeAccuracy | The altitude accuracy of position (returned if available) |
coords.heading | The heading as degrees clockwise from North (returned if available) |
coords.speed | The speed in meters per second (returned if available) |
timestamp | The date/time of the response (returned if available) |
Geolocation Object - Další zajímavé metody
Objekt Geolocation má také další zajímavé metody:
watchPosition()
- Vrátí aktuální polohu uživatele a pokračuje v návratu aktualizované polohy, když se uživatel pohybuje (jako GPS v autě).clearWatch()
- ZastavíwatchPosition()
metodu.
Níže uvedený příklad ukazuje watchPosition()
metodu. K testování potřebujete přesné zařízení GPS (například smartphone):
Příklad
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>