API lokalizacji Web

Zlokalizowanie pozycji użytkownika

API Geolocation HTML służy do uzyskiwania lokalizacji użytkownika.

Z powodu potencjalnego uszkodzenia prywatności, lokalizacja nie jest dostępna, chyba że użytkownik wyrazi na to zgodę.

Spróbuj sam

Komentarz:Geolokalizacja jest najbardziej dokładna dla urządzeń z GPS (np. smartfony).

Wszystkie przeglądarki obsługują API Geolocation:

Chrome IE Firefox Safari Opera
Obsługa Obsługa Obsługa Obsługa Obsługa

Komentarz:Od wersji Chrome 50, API Geolocation będzie dostępne tylko w kontekście bezpiecznym, na przykład HTTPS. Jeśli Twoja strona jest hostowana w niebezpiecznym źródle (na przykład HTTP), żądanie uzyskania lokalizacji użytkownika przestanie działać.

Użycie API Geolocation

getCurrentPosition() Metoda służy do zwracania lokalizacji użytkownika.

Poniższy przykład zwraca szerokość i długość geograficzną lokalizacji użytkownika:

Przykład

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }
    x.innerHTML = "Geolokalizacja nie jest obsługiwana przez tę przeglądarkę.";
  }
}
function showPosition(position) {
  x.innerHTML = "Szerokość geograficzna: " + position.coords.latitude +
  "Długość geograficzna: " + position.coords.longitude;
}
</script>

Spróbuj sam

Przykład wyjaśnienia:

  1. Sprawdź, czy obsługa Geolocation jest dostępna
  2. Jeśli metoda getCurrentPosition() jest dostępna, uruchom ją. W przeciwnym razie wyświetl użytkownikowi komunikat
  3. Jeśli metoda getCurrentPosition() zakończy się sukcesem, zwraca obiekt coordinates do funkcji określonej w parametrze (showPosition)
  4. Funkcja showPosition() wyświetla szerokość i długość geograficzną

Powyższy przykład to bardzo podstawowy skrypt geolokalizacji bez obsługi błędów.

Obsługa błędów i odmowy

getCurrentPosition() Drugi parametr metody jest używany do obsługi błędów. Jeśli nie można uzyskać lokalizacji użytkownika, określa funkcję do wykonania:

Przykład

function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "Użytkownik odmówił prośby o Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Informacje o lokalizacji są niedostępne."
      break;
    case error.TIMEOUT:
      x.innerHTML = "Prośba o uzyskanie lokalizacji użytkownika upłynęła czas."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "Wystąpił nieznany błąd."
      break;
  }
}

Spróbuj sam

Wyświetlanie wyników na mapie

Aby wyświetlić wyniki na mapie, musisz uzyskać dostęp do usługi mapy, na przykład Google Maps.

W poniższym przykładzie, zwracane szerokość i długość są używane do wyświetlenia pozycji na mapie Google (używając obrazu statycznego):

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 lokalne

Ta strona pokazuje, jak wyświetlić pozycję użytkownika na mapie.

Geolocation jest również bardzo przydatna dla informacji specyficznych dla lokalizacji, takich jak:

  • Najnowsze lokalne informacje
  • Pokazuj punkty zainteresowania użytkownika w pobliżu
  • Nawigacja krok po kroku (Turn-by-turn navigation) (GPS)

Metoda getCurrentPosition() - zwracane dane

getCurrentPosition() Metoda zwraca obiekt w przypadku sukcesu. Zawsze zwraca atrybuty szerokości, długości i dokładności. Jeśli są dostępne, zwracane są również inne atrybuty:

Atrybuty Zwróć
coords.latitude Szerokość geograficzna w formie liczby dziesiętnej (zawsze zwracane).
coords.longitude Długość geograficzna w formie liczby dziesiętnej (zawsze zwracane).
coords.accuracy Dokładność pozycji (zawsze zwracane).
coords.altitude Wysokość nad średnim poziomem morza w metrach (jeśli dostępne, zwracane jest).
coords.altitudeAccuracy Dokładność wysokości pozycji (jeśli dostępne, zwracane jest).
coords.heading Kierunek kursu w kierunku północnym wzdłuż osi wschodniej (jeśli dostępne, zwracane jest).
coords.speed Prędkość w metrach na sekundę (jeśli dostępne, zwracane jest).
timestamp Data i czas odpowiedzi (jeśli dostępne, zwracane jest).

Obiekt Geolocation - inne interesujące metody

Obiekt Geolocation ma również inne interesujące metody:

  • watchPosition() - Zwróć aktualną pozycję użytkownika i kontynuuj zwracanie aktualizacji pozycji w miarę przemieszczania się użytkownika (np. w samochodzie z GPS).
  • clearWatch() - Zatrzymaj metodę watchPosition().

Poniższe przykłady pokazują watchPosition() Metoda. Potrzebujesz dokładnego urządzenia GPS do testowania (np. smartfon):

Przykład

<script>
const x = document.getElementById("demo");
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.watchPosition(showPosition);
  }
    x.innerHTML = "Geolokalizacja nie jest obsługiwana przez tę przeglądarkę.";
  }
}
function showPosition(position) {
  x.innerHTML = "Szerokość geograficzna: " + position.coords.latitude +
  "Długość geograficzna: " + position.coords.longitude;
}
</script>

Spróbuj sam