Lokalizacja geograficzna HTML5

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

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

Zlokalizowanie pozycji użytkownika

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

Z powodu możliwości naruszenia prywatności użytkownika, informacje o pozycji użytkownika są niedostępne bez jego zgody.

Obsługa przeglądarek

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

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

HTML5 - Użycie geolokalizacji

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

Poniższy przykład to prosty przykład geolokalizacji, który może zwrócić długość i szerokość geograficzną pozycji 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 +
  "<br />Długość geograficzna: " + position.coords.longitude;
  }
</script>

Spróbuj sam

Przykład wyjaśnienia:

  • Sprawdzenie, czy obsługa geolokalizacji jest dostępna
  • Jeśli funkcja getCurrentPosition() jest obsługiwana, uruchamia się ją. W przeciwnym razie wyświetla się komunikat dla użytkownika.
  • Jeśli getCurrentPosition() uruchomi się pomyślnie, zwraca obiekt coordinates do funkcji określonej w argumencie showPosition
  • 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 jest uruchamiana, gdy uzyskiwanie pozycji użytkownika się nie powiodło:

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="Żą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 używamy zwróconych danych o długości i szerokości geograficznej, aby wyświetlić pozycję na mapie Google (używając obrazów statycznych).

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 danym miejscu

Strona ta pokazuje, jak wyświetlić pozycję użytkownika na mapie. Jednak geolokalizacja jest również bardzo przydatna do uzyskiwania informacji o danym 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 pomyślnie, 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ść nad poziomem morza, wyrażona w metrach
coords.altitudeAccuracy Dokładność wysokości pozycji
coords.heading Kierunek, licząc od strony północnej, 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(). Aby przetestować ten przykład, potrzebujesz dokładnego urządzenia GPS (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 +
  "<br />Długość geograficzna: " + position.coords.longitude;
  }
</script>

Spróbuj sam