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 .
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ądsamouczkaPrzeprowadzenie przez kodHTML5Location APILiveLocationPublikowaniedługości i szerokości geograficznejKolejnekroki
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.
Poznaj PubNub
Sprawdź Live Tour, aby zrozumieć podstawowe koncepcje każdej aplikacji opartej na PubNub w mniej niż 5 minut.
Rozpocznij konfigurację
Załóż konto PubNub, aby uzyskać natychmiastowy i bezpłatny dostęp do kluczy PubNub.
Rozpocznij
Dokumenty PubNub pozwolą Ci rozpocząć pracę, niezależnie od przypadku użycia lub zestawu SDK.
Top comments (0)