Internetowy interfejs API geolokalizacji
Znajdź pozycję użytkownika
API geolokalizacji HTML służy do uzyskania położenia geograficznego użytkownika.
Ponieważ może to narazić prywatność, pozycja nie jest dostępna, chyba że użytkownik ją zatwierdzi.
Uwaga: Geolokalizacja jest najdokładniejsza dla urządzeń z GPS, takich jak smartfon.
Geolokalizacja API jest obsługiwany we wszystkich przeglądarkach:
| Yes | Yes | Yes | Yes | Yes |
Uwaga: od Chrome 50 interfejs API geolokalizacji będzie działał tylko w bezpiecznych kontekstach, takich jak HTTPS. Jeśli Twoja witryna jest hostowana w niezabezpieczonym źródle (takim jak HTTP), żądania uzyskania lokalizacji użytkownika przestaną działać.
Korzystanie z Geolokalizacji API
Metoda getCurrentPosition()służy do zwrócenia pozycji użytkownika.
Poniższy przykład zwraca szerokość i długość geograficzną pozycji użytkownika:
Przykład
<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>
Wyjaśnienie przykładu:
- Sprawdź, czy Geolokalizacja jest obsługiwana
- Jeśli jest obsługiwana, uruchom metodę getCurrentPosition(). Jeśli nie, wyświetl wiadomość dla użytkownika
- Jeśli metoda getCurrentPosition() powiedzie się, zwraca obiekt współrzędnych do funkcji określonej w parametrze (showPosition)
- Funkcja showPosition() zwraca szerokość i długość geograficzną
Powyższy przykład to bardzo prosty skrypt geolokalizacji, bez obsługi błędów.
Obsługa błędów i odrzuceń
Drugi parametr getCurrentPosition()metody służy do obsługi błędów. Określa funkcję do uruchomienia, jeśli nie uda się uzyskać lokalizacji użytkownika:
Przykład
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;
}
}
Wyświetlanie wyniku na mapie
Aby wyświetlić wynik na mapie, potrzebujesz dostępu do usługi mapowej, takiej jak Mapy Google.
W poniższym przykładzie zwrócona szerokość i długość geograficzna jest używana do pokazania lokalizacji na mapie Google (przy użyciu statycznego obrazu):
Przykład
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+"'>";
}
Informacje specyficzne dla lokalizacji
Na tej stronie pokazano, jak pokazać pozycję użytkownika na mapie.
Geolokalizacja jest również bardzo przydatna w przypadku informacji dotyczących lokalizacji, takich jak:
- Aktualne informacje lokalne
- Pokazywanie interesujących miejsc w pobliżu użytkownika
- Szczegółowa nawigacja (GPS)
Metoda getCurrentPosition() — Zwróć dane
Metoda getCurrentPosition()zwraca obiekt w przypadku powodzenia. Zawsze zwracane są właściwości szerokości, długości i dokładności. Inne właściwości są zwracane, jeśli są dostępne:
| 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) |
Obiekt geolokalizacji - Inne ciekawe metody
Obiekt Geolokalizacja posiada również inne ciekawe metody:
watchPosition()- Zwraca bieżącą pozycję użytkownika i kontynuuje zwracanie zaktualizowanej pozycji, gdy użytkownik się porusza (jak GPS w samochodzie).clearWatch()- ZatrzymujewatchPosition()metodę.
Poniższy przykład przedstawia watchPosition()metodę. Aby to przetestować, potrzebujesz dokładnego urządzenia GPS (takiego jak smartfon):
Przykład
<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>