Śledzenie geolokalizacji za pomocą Google Maps API

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, 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!

Przegląd samouczka

Kod dla tego przykładu jest dostępny w CodePen tutaj .

Pamiętaj, że aby włączyć wersję demonstracyjną, musisz podać własny klucz API z Google Cloud Platform.

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 i drugiej, gdzie skonfigurowaliśmy nasze środowisko JavaScript i rozpoczęliśmy pracę z markerami map.

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:

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

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

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.

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!

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.

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.

    <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 - ś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?Przegląd samouczkaPrzeprowadzenie przez kodHTML5 Location APILive LocationPublikowanie długości i szerokości geograficznejKolejne kroki

Jak PubNub może ci pomóc?

Ten artykuł został pierwotnie opublikowany na PubNub.com

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.