Web Geolocation API
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 je smartphone.
Geolocation API je podporováno ve všech prohlížečích:
Yes | Yes | Yes | Yes | Yes |
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í Geolocation API
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>
const 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;
}
}
Zobrazení výsledku na mapě
Chcete-li zobrazit výsledek na mapě, potřebujete přístup k mapové službě, jako jsou Mapy Google.
V níže uvedeném příkladu se vrácená zeměpisná šířka a délka používá k zobrazení polohy na mapě Google (pomocí statického obrázku):
Příklad
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
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>
const 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>