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>