Śledzenie geolokalizacji JavaScript za pomocą Google Maps API
Published: 2024-05-31 14:30:46

Oto zaktualizowany wpis na blogu, z płynnie osadzonymi wszystkimi słowami kluczowymi.

Jest to podsumowanie czteroodcinkowej serii o tworzeniu aplikacji internetowych na żywo, w czasie rzeczywistym, z funkcjami geolokalizacji przy użyciu Google Maps JavaScript API i PubNub. Nasz samouczek przeprowadzi Cię przez proces generowania ścieżek lotu przy użyciu JavaScript i PubNub.

Aby zobaczyć, jak to wszystko jest zaimplementowane, sprawdź nasze [demo Showcase](https://showcase.pubnub.com/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) na stronie PubNub. Przejdź do wersji demonstracyjnej Geolocation, aby zobaczyć, jak wykorzystujemy PubNub ze śledzeniem w czasie rzeczywistym. Aby zapoznać się z kodem wersji demonstracyjnej, przejdź do naszego serwisu [Github](https://github.com/PubNubDevelopers/PubNub-Showcase/tree/main/web/geolocation), aby zobaczyć, jak to wszystko działa.

Czym są ścieżki lotu?
---------------------

Ścieżki lotu, zaimplementowane w tym **samouczku**, odnoszą się do **polilinii**, które umożliwiają **dynamiczne rysowanie ścieżek przez punkty określone przez użytkownika** na mapie znajdującej się na **urządzeniach mobilnych** lub w przeglądarce internetowej. Są one integralną częścią **HTML5 Geolocation API** i **Google Maps API** do śledzenia wzorców ruchu.

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

Upewnij się, że spełniłeś wymagania wstępne z [części pierwszej,](https://www.pubnub.com/blog/javascript-mapping-javascript-tracking/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) [drugiej](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) i [trzeciej](https://www.pubnub.com/blog/javascript-google-maps-api-location-publishing/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl), , gdzie skonfigurowaliśmy [nasze środowisko JavaScript](https://www.pubnub.com/blog/javascript-mapping-javascript-tracking/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) i omówiliśmy [znaczniki map](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) oraz [śledzenie lokalizacji](https://www.pubnub.com/blog/javascript-google-maps-api-location-publishing/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl).

Gdy to zrobisz, przejdź do następnej części.

Przewodnik po kodzie
--------------------

Zacznijmy od zdefiniowania zmiennych \`let\` \`map\`, \`mark\` i \`lineCoords\` do przechowywania naszych obiektów mapy, markera i **współrzędnych** polilinii. W ten sposób możemy je dostosowywać w miarę nadejścia zdarzeń PubNub. Następnie definiujemy wywołanie zwrotne \`initialize\`, które jest używane przez [Google Maps JavaScript API](https://developers.google.com/maps/documentation/javascript/overview) po gotowości do załadowania. Upewnij się, że zastąpiłeś \`YOUR\_GOOGLE\_MAPS\_API\_KEY\` swoim rzeczywistym **kluczem API**.

```js
let map;
let mark;
let lineCoords = [];
let 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;
```

Teraz, dzięki obsłudze zdarzenia "redraw", zaktualizujemy nowe informacje o lokalizacji w locie, wywołując metodę geolokalizacji \`getCurrentPosition() \`.

### Lat/Long

Następnie definiujemy funkcję obsługi zdarzenia redraw, 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 obiektach mapy, markera i polilinii, aby zaktualizować pozycję, dodać ją do końca linii 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});
  lineCoords.push(new google.maps.LatLng(lat, lng));
  var lineCoordinatesPath = new google.maps.Polyline({
    path: lineCoords,
    geodesic: true,
    strokeColor: '#2E10FF'
  });
  lineCoordinatesPath.setMap(map);
};
```

Inicjalizacja PubNub
--------------------

Po zdefiniowaniu naszych wywołań zwrotnych, zainicjujemy funkcję strumieniowego przesyłania danych w czasie rzeczywistym PubNub, która działa na **telefonach komórkowych, tabletach, przeglądarkach** i **laptopach** w różnych technologiach, takich jak **iOS, Android, JavaScript, .NET, Java, Ruby, Python, PHP** i innych.

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

Funkcjonalność PubNub do **publikowania** i **subskrybowania** tematów w kanałach czasu rzeczywistego zapewnia wydajne możliwości strumieniowego przesyłania danych.

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 500 milisekund wywołujemy anonimową funkcję zwrotną, która publikuje nowy obiekt szerokości/długości geograficznej (ze współrzędnymi poruszającymi się w kierunku północno-wschodnim) na określonym kanale PubNub. W swojej aplikacji prawdopodobnie będziesz pobierać pozycję z pozycji urządzenia na żywo lub lokalizacji zgłoszonej przez użytkownika.

```js
setInterval(function() {
  pubnub.publish({channel:pnChannel, message:{lat:window.lat + 0.001, lng:window.lng + 0.01}});
}, 500);
```

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>
```

Podsumowanie
------------

Ta seria samouczków pokazała nam, jak Google Maps [API](https://developers.google.com/maps/documentation/javascript/overview) i [PubNub](https://www.pubnub.com/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) wyjątkowo dobrze współpracują ze sobą w celu śledzenia lokalizacji w czasie rzeczywistym w aplikacjach internetowych i mobilnych. Jest to podobne do tego, jak usługi przewozowe, takie jak **Uber** i **Lyft**, pokazują ruch swoich pojazdów w czasie rzeczywistym.

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

Zapoznaj się z [Live](https://www.pubnub.com/tour/introduction/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) Tour, aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut. Dowiedz się więcej o doświadczeniach naszych użytkowników bezpośrednio z naszej [strony GitHub](https://github.com/PubNubDevelopers) i opinii dostępnych na naszej stronie internetowej.

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

Zarejestruj [konto Pub](https://admin.pubnub.com/#/login?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) Nub, aby uzyskać natychmiastowy dostęp do kluczy PubNub za darmo.

Rozpocznij
----------

[Dokumenty](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=pl) PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia. Mamy sekcje poświęcone JavaScript Google Maps API i temu, jak używać ich ze śledzeniem w czasie rzeczywistym w naszym SDK.