close
wykrywanie-lokalizacji

W tym artykule dowiesz się, jak wykryć położenie użytkownika korzystając z JavaScript.

JavaScript umożliwia lokalizację użytkownika dzięki Geolocation API. To narzędzie udostępnia wiele metod przydatnych w ustalaniu pozycji użytkownika. Do wyboru mamy 3 możliwości ustalania lokalizacji:

  • WiFi – bardzo dokładne i dostępne na większości urządzeń
  • GPS – dostępne głównie na urządzeniach mobilnych, bardzo dokładne
  • IP – niezbyt dokładne (pozwoli nam poznać region)

Ostatniej opcji użyjemy najczęściej, gdy nie będziemy w stanie pobrać lokalizacji z WiFi/GPS.

Korzystanie z Geolocation

Geolocation jest wspierana w większości przeglądarek, jednak mimo to upewnimy się, że możemy jej użyć. Możemy to sprawdzić w ten sposób:

W tym momencie możemy w bardzo prosty sposób pobrać szerokość i długość geograficzną. Korzystamy w tym celu z metody getCurrentPosition.

Jako parametr tej metody podajemy funkcję anonimową z parametrem location. Następnie wyciągamy z niej szerokość i długość geograficzną.

Po uruchomieniu strony w przeglądarce zostaniemy zapytani o udostępnienie lokalizacji. Po zezwoleniu dane wyświetlą się w konsoli.

geoloc console

Oprócz szerokości (latitude) i wysokości (longitude) możemy pobrać kilka innych czynników:

  • accuracy – margines błędu w metrach
  • altitude – wysokość n.p.m.
  • altitudeAccuracy – margines błędu wysokości n.p.m
  • heading – kierunek urządzenia (w stopniach) względem północy
  • speed – prędkość urządzenia w metrach na sekundę

Integracja z Google Maps

Możemy teraz zintegrować geolocation z Google Maps i dynamicznie wyświetlać lokalizację użytkownika. Zaczniemy od utworzenia dwóch elementów HTML:

Po kliknięciu buttona #detect mapa pojawi się wewnątrz diva #map. Dodajmy jeszcze kilka linijek CSS:

Podepnijmy teraz API Google Maps:

Teraz wystarczy już tylko połączyć wszystko w całość:

Końcowy efekt wygląda tak:

geolocation final

I to wszystko. Wykrywanie lokalizacji użytkownika działa poprawnie. Klikając poniżej będziesz mógł pobrać pliki.

Pobierz pliki

Tags : google maps