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>