Śledzenie geolokalizacji za pomocą Google Maps API
Published: 2024-03-24 20:32:37

_Jest to trzecia część naszej czteroczęściowej serii na temat tworzenia map w czasie rzeczywistym i interfejsu API geolokalizacji do śledzenia urządzeń za pomocą platformy Google Maps i PubNub._

Czym jest śledzenie geolokalizacji?
-----------------------------------

W tym samouczku dla początkujących zbudujemy aplikację, która na żywo aktualizuje znaczniki map Google Maps JavaScript API, które zbudowaliśmy w [części drugiej](https://pubnub.com/blog/javascript-google-maps-api-map-markers/), z możliwościami geolokalizacji na żywo. Wykorzystamy api geolokalizacji HTML5 do zbierania lokalizacji użytkownika z jego urządzenia oraz przesyłania strumieniowego i publikowania zmian lokalizacji (w oparciu o samodzielnie zgłoszoną lokalizację urządzenia) na mapie za pomocą PubNub Real-time Messaging - [śledzenia lokalizacji w czasie rzeczywistym!](https://www.pubnub.com/solutions/geolocation/)

![pubnub_javascript_location](https://images.ctfassets.net/3prze68gbwl1/asset-17suaysk1qa1k10/8880f7c3626a4c6e3d3c03df0427875e/pubnub_javascript_location-889x1024.png "pubnub_javascript_location")

Przegląd samouczka
------------------

[Kod dla tego przykładu jest dostępny w CodePen tutaj](https://codepen.io/team/PubNub/pen/OOKXyg) .[](https://codepen.io/team/PubNub/pen/OOKXyg)

[Pamiętaj, że aby włączyć wersję demonstracyjną, musisz podać własny klucz API z Google Cloud Platform.](https://codepen.io/team/PubNub/pen/OOKXyg)

Jeśli jeszcze tego nie zrobiłeś, musisz najpierw zadbać o kilka warunków wstępnych, które omówiliśmy w [części pierwszej](https://pubnub.com/blog/javascript-mapping-javascript-tracking/) i [drugiej](https://pubnub.com/blog/javascript-google-maps-api-map-markers/), gdzie skonfigurowaliśmy [nasze środowisko JavaScript](https://pubnub.com/blog/javascript-mapping-javascript-tracking/) i rozpoczęliśmy [pracę z markerami map](https://pubnub.com/blog/javascript-google-maps-api-map-markers/).

Teraz, gdy mamy już wszystkie odpowiednie ustawienia konfiguracyjne i mamy nasze znaczniki mapy, zacznijmy zbierać i publikować dane o lokalizacji dla naszej internetowej lub mobilnej mapy internetowej.

Przebieg kodu
-------------

Mamy już skonfigurowany nasz DIV dla aplikacji i DIV do przechowywania mapy z naszego poprzedniego samouczka. Teraz nadszedł czas, aby użyć interfejsu API lokalizacji HTML5 do aktualizacji naszej lokalizacji w czasie rzeczywistym.

### API lokalizacji HTML5

Zróbmy to krok po kroku. Najpierw ustawiamy początkową szerokość i długość geograficzną w ogólnym sąsiedztwie San Francisco. Następnie tworzymy funkcję pobierającą lokalizację urządzenia za pomocą interfejsu API lokalizacji HTML5 i aktualizującą zmienne lokalizacji przeglądarki. Ustawiamy interwał czasowy do okresowego uzyskiwania lokalizacji urządzenia. Dla wygody tworzymy obiekt JavaScript zawierający te wartości jako szerokość i długość geograficzną.

Poniższy fragment kodu JavaScript pokazuje, jak uzyskać aktualną lokalizację użytkownika:

```js
<script>
window.lat = 37.7850;
window.lng = -122.4383;
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(updatePosition);
    }
    return null;
};
function updatePosition(position) {
  if (position) {
    window.lat = position.coords.latitude;
    window.lng = position.coords.longitude;
  }
}
setInterval(function(){updatePosition(getLocation());}, 10000);
function currentLocation() {
  return {lat:window.lat, lng:window.lng};
};
```

OK, teraz, gdy mamy już rzeczy związane z lokalizacją HTML5 z drogi, przejdźmy do dobrych rzeczy.

### Lokalizacja na żywo

Definiujemy zmienne map i mark, aby przechowywać naszą mapę i obiekty markerów, dzięki czemu możemy nimi manipulować w locie, gdy nadchodzą zdarzenia PubNub. Następnie definiujemy wywołanie zwrotne inicjalizacji, które interfejs API JavaScript Map Google może wywołać, gdy jest gotowy do załadowania, i upewniamy się, że jest on członkiem obiektu okna, aby był dostępny dla interfejsu API.

```js
var map;
var mark;
var initialize = function() {
  map  = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12});
  mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map});
};
window.initialize = initialize;
```

Następnie definiujemy funkcję obsługi zdarzenia przerysowania, którą będziemy wywoływać za każdym razem, gdy otrzymamy nowe zdarzenie zmiany pozycji w locie. W pierwszej części funkcji ustawiamy szerokość i długość geograficzną na nowe wartości z komunikatu. Następnie wywołujemy odpowiednie metody na mapie i obiektach znaczników, aby zaktualizować pozycję i ponownie wyśrodkować mapę.

```js
var redraw = function(payload) {
  lat = payload.message.lat;
  lng = payload.message.lng;
  map.setCenter({lat:lat, lng:lng, alt:0});
  mark.setPosition({lat:lat, lng:lng, alt:0});
};
```

Teraz, gdy zdefiniowaliśmy nasze wywołania zwrotne, mamy całą niezbędną maszynerię, dzięki czemu możemy przejść do inicjalizacji funkcji przesyłania strumieniowego danych w czasie rzeczywistym PubNub. Najpierw decydujemy o nazwie kanału, na którym będziemy oczekiwać nowych aktualizacji pozycji. Następnie inicjalizujemy bibliotekę PubNub przy użyciu kluczy publikowania i subskrypcji, które skonfigurowaliśmy wcześniej w [kroku 1 warunków wstępnych](https://pubnub.com/blog/javascript-mapping-javascript-tracking/).

Na koniec mówimy bibliotece PubNub, aby zasubskrybowała odpowiedni kanał i dołączamy funkcję redraw jako nasłuchującą przychodzących zdarzeń. Co tworzy te zdarzenia, można zapytać? Bądź na bieżąco!

```js
var pnChannel = "map2-channel";
var pubnub = new PubNub({
  publishKey:   'YOUR_PUB_KEY',
  subscribeKey: 'YOUR_SUB_KEY'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw});
```

### Publikowanie długości i szerokości geograficznej

W tym prostym samouczku skonfigurowaliśmy podstawowy licznik interwałów JavaScript, aby publikować nowe pozycje w oparciu o bieżący czas. Co 5000 milisekund wywołujemy anonimową funkcję zwrotną, która publikuje nowy obiekt szerokości/długości geograficznej (utworzony przez wywołanie currentLocation()) na określonym kanale PubNub.

```js
setInterval(function() {
  pubnub.publish({channel:pnChannel, message:currentLocation()});
}, 5000);
</script>
```

Wreszcie, na samym końcu inicjalizujemy interfejs API Map Google, aby upewnić się, że elementy DOM i warunki wstępne JavaScript są spełnione.

```js
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_GOOGLE_MAPS_API_KEY&callback=initialize"></script>
  </body>
</html>
```

Następne kroki
--------------

Skończyliśmy w 75%, a teraz nadszedł czas, aby dodać naszą ostatnią funkcję w [części czwartej -](https://pubnub.com/blog/javascript-google-maps-api-flight-paths/) ścieżki lotu! Ścieżki lotu pokażą, jaką trasę pokonało nasze urządzenie, rysując ścieżkę za znacznikiem mapy.

#### Spis treści

[Czym jest śledzenie geolokalizacji?](#h-0)[Przegląd](#h-1)[samouczkaPrzeprowadzenie przez kodHTML5](#h-2)[Location APILive](#h-3)[LocationPublikowanie](#h-4)[długości i szerokości geograficznejKolejne](#h-5)[kroki](#h-6)

Jak PubNub może ci pomóc?
=========================

Ten artykuł został pierwotnie opublikowany na [PubNub.com](https://www.pubnub.com/blog/geolocation-tracking-with-google-maps-api/)

Nasza platforma pomaga programistom tworzyć, dostarczać i zarządzać interaktywnością w czasie rzeczywistym dla aplikacji internetowych, aplikacji mobilnych i urządzeń IoT.

Podstawą naszej platformy jest największa w branży i najbardziej skalowalna sieć komunikacyjna w czasie rzeczywistym. Dzięki ponad 15 punktom obecności na całym świecie obsługującym 800 milionów aktywnych użytkowników miesięcznie i niezawodności na poziomie 99,999%, nigdy nie będziesz musiał martwić się o przestoje, limity współbieżności lub jakiekolwiek opóźnienia spowodowane skokami ruchu.

Poznaj PubNub
-------------

Sprawdź [Live Tour](https://www.pubnub.com/tour/introduction/), aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut.

Rozpocznij konfigurację
-----------------------

Załóż [konto](https://admin.pubnub.com/signup/) PubNub, aby uzyskać natychmiastowy i bezpłatny dostęp do kluczy PubNub.

Rozpocznij
----------

[Dokumenty](https://www.pubnub.com/docs) PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia lub [zestawu SDK](https://www.pubnub.com/docs).