Lokalizacja geograficzna HTML5

HTML5 Geolocation (geolokalizacja) służy do zlokalizowania pozycji użytkownika.

Spróbuj sam: wyświetl swoją lokalizację na mapach Google

Zlokalizowanie pozycji użytkownika

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

Ze względu na możliwość naruszenia prywatności użytkownika, informacja o lokalizacji użytkownika jest niedostępna bez jego zgody.

Obsługa przeglądarek

Internet Explorer 9, Firefox, Chrome, Safari oraz Opera obsługują geolokalizację.

Komentarz:Dla urządzeń z GPS, takich jak iPhone, geolokalizacja jest bardziej precyzyjna.

HTML5 - Użycie geolokalizacji

Użyj metody getCurrentPosition() do uzyskania lokalizacji użytkownika.

Poniższy przykład to prosty przykład geolokalizacji, który może zwrócić długość i szerokość geograficzną lokalizacji użytkownika.

Przykład

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{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

Wyjaśnienie przykładu:

  • Sprawdzenie, czy obsługa geolokalizacji jest dostępna
  • Jeśli obsługa.getCurrentPosition() jest dostępna, uruchom metodę getCurrentPosition(). W przeciwnym razie wyświetl użytkownikowi komunikat.
  • Jeśli getCurrentPosition() zakończy się sukcesem, zwróci obiekt coordinates do funkcji showPosition, która została podana jako parametr
  • Funkcja showPosition() uzyskuje i wyświetla długość i szerokość geograficzną

Powyższy przykład to bardzo podstawowy skrypt geolokalizacji, który nie zawiera obsługi błędów.

Obsługa błędów i odmowy

Drugi parametr metody getCurrentPosition() służy do obsługi błędów. Określa funkcję, która będzie uruchamiana, gdy nie uda się uzyskać lokalizacji użytkownika:

Przykład

function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="Użytkownik odmówił prośby o lokalizację."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Informacje o lokalizacji są niedostępne."
      break;
    case error.TIMEOUT:
      x.innerHTML="Żądanie uzyskania pozycji użytkownika przekroczyło czas oczekiwania."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="Wystąpił nieznany błąd."
      break;
    }
  }

Spróbuj sam

Kod błędu:

  • Dostęp zabroniony - Użytkownik nie zezwolił na geolokalizację
  • Lokalizacja niedostępna - Nie można uzyskać bieżącej pozycji
  • Timeout - Operacja przekroczyła czas oczekiwania

Wyświetlanie wyników na mapie

Aby wyświetlić wyniki na mapie, musisz uzyskać dostęp do usługi mapowej, która obsługuje współrzędne geograficzne, np. Google Maps lub Baidu Maps:

Przykład

function showPosition(position)
{
var latlon=position.coords.latitude+","+position.coords.longitude;
var img_url="http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
}

Spróbuj sam

W przykładzie tym używamy zwróconych danych o długości i szerokości geograficznej, aby wyświetlić pozycję na mapie Google (używając obrazu statycznego).

Skrypty Google Maps

Poniższy link pokazuje, jak używać skryptów do wyświetlania interaktywnej mapy z opcjami znaczników, skalowania i przeciągania.

Informacje o miejscu

Strona ta pokazuje, jak wyświetlić pozycję użytkownika na mapie. Jednak geolokalizacja jest również bardzo przydatna do uzyskiwania informacji o określonym miejscu.

Przykład:

  • Aktualizacja lokalnych informacji
  • Wyświetlanie punktów zainteresowania użytkownika w okolicy
  • Interaktywny system nawigacji pojazdowej (GPS)

Metoda getCurrentPosition() - Zwracane dane

Jeśli operacja się powiodła, metoda getCurrentPosition() zwraca obiekt. Zawsze zwraca atrybuty latitude, longitude oraz accuracy. Jeśli są dostępne, zwraca również inne poniższe atrybuty.

Atrybuty Opis
coords.latitude Dekadeczna szerokość geograficzna
coords.longitude Dekadeczny długość geograficzna
coords.accuracy Dokładność lokalizacji
coords.altitude Wysokość n.p.m., wyrażona w metrach
coords.altitudeAccuracy Dokładność wysokości pozycji
coords.heading Kierunek, licząc od kierunku północnego, wyrażony w stopniach
coords.speed Prędkość, wyrażona w metrach na sekundę
timestamp Odpowiednia data/czas

Obiekt Geolocation - inne interesujące metody

watchPosition() - zwraca aktualną pozycję użytkownika i kontynuuje zwracanie aktualizacji pozycji użytkownika podczas ruchu (jak GPS w samochodzie).

clearWatch() - zatrzymanie metody watchPosition()

Poniższy przykład pokazuje metodę watchPosition(). Musisz mieć urządzenie z dokładnym urządzeniem GPS do przetestowania tego przykładu (np. iPhone):

Przykład

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
  else{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