Śledzenie geolokalizacji JavaScript za pomocą Google Maps API

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 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, 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, drugiej i trzeciej, , gdzie skonfigurowaliśmy nasze środowisko JavaScript i omówiliśmy znaczniki map oraz śledzenie lokalizacji.

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 po gotowości do załadowania. Upewnij się, że zastąpiłeś YOUR\_GOOGLE\_MAPS\_API\_KEY\ swoim rzeczywistym kluczem API.

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ę.

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.

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.

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.

<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 i PubNub 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 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 i opinii dostępnych na naszej stronie internetowej.

Rozpocznij konfigurację

Zarejestruj konto Pub Nub, aby uzyskać natychmiastowy dostęp do kluczy PubNub za darmo.

Rozpocznij

Dokumenty 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.