Zanim rozpoczniemy ten samouczek, zarejestruj konto PubNub, aby uzyskać klucze API. Oferujemy hojną warstwę piaskownicy, która nie kosztuje ani grosza, dopóki nie nadejdzie czas na skalowanie!

Funkcjegeolokalizacji i śledzenia stale się rozwijają. Wyszliśmy poza statyczne mapy do sfery interaktywnej i dynamicznej technologii mapowania API. Zmiana ta podkreśliła niezbędną rolę, jaką geolokalizacyjny interfejs API odgrywa w każdej branży, od gospodarki na żądanie po Internet przedmiotów.

Śledzenie w czasie rzeczywistym z pewnością rzuca szeroką sieć, prawda?

Przegląd samouczka śledzenia w Mapach Google

Jest to czteroczęściowy samouczek na temat tworzenia map w czasie rzeczywistym dla stron internetowych i mobilnych przy użyciu interfejsu API Google Maps JavaScript i PubNub. Zaczniemy od podstaw, aby skonfigurować aplikację, a następnie dodamy funkcjonalność geolokalizacji w czasie rzeczywistym w kolejnych częściach.

Pod koniec będziesz mieć podstawową aplikację do śledzenia lokalizacji JavaScript ze znacznikami na mapie, śledzeniem lokalizacji urządzenia i ścieżkami lotu, zasilaną przez JavaScript Google Maps API i PubNub.

Konfiguracja API lokalizacji w czasie rzeczywistym

Zasoby samouczka

W tym samouczku zakładamy, że pracujesz z najnowszą przeglądarką evergreen na komputerze stacjonarnym lub urządzeniu mobilnym.

Konfiguracja PubNub

Aby rozpocząć, najpierw będziesz potrzebować kluczy publikowania i subskrypcji PubNub. Jeśli nie masz konta, możesz zarejestrować się tutaj, a klucze pub/sub są dostępne w panelu administratora. Klucze przypominają identyfikatory UUID i zaczynają się odpowiednio od prefiksów "pub-c-" i "sub-c-".

Gdy masz już klucze pub/sub, utwórz nową aplikację PubNub, która będzie reprezentować twoją aplikację na Androida (i wszelkie inne systemy, które komunikują się za pomocą tych samych kanałów). Aplikacja PubNub będzie zawierać klucze publikowania i subskrybowania, których aplikacje mogą używać dla tych określonych funkcji.

Konfiguracja interfejsu API Map Google

Aby zintegrować się z Google Maps, musisz utworzyć klucz API Google Maps. Zalecamy to zrobić, korzystając z przewodnika dla początkujących tutaj. Spowoduje to utworzenie unikalnego klucza API, który można zablokować w dowolnej aplikacji internetowej. Po rozpoczęciu tworzenia wielu projektów możesz zarządzać swoimi poświadczeniami w konsoli Google API tutaj.

Nie zapomnij włączyć "Maps JavaScript API" w konsoli Google Cloud po utworzeniu klucza API.

Przegląd interfejsu API lokalizacji w czasie rzeczywistym

W tej przykładowej aplikacji HTML5 i JavaScript PubNub zapewnia możliwość komunikacji w czasie rzeczywistym, która pozwala naszej aplikacji internetowej odbierać zdarzenia przychodzące, gdy zmienia się pozycja zdalnego obiektu (szerokość i długość geograficzna).

Podstawową funkcjonalnością PubNub, z której korzystamy, jest komunikacja w czasie rzeczywistym. Nasza aplikacja wykorzystuje kanał PubNub do wysyłania i odbierania zdarzeń zmiany pozycji. W tym przykładzie ta sama aplikacja zarówno wysyła, jak i odbiera zdarzenia pozycji, więc mówimy, że jest zarówno wydawcą, jak i subskrybentem. W twojej aplikacji system(y) wydawcy (nadawcy) mogą być inne niż system(y) subskrybenta (odbiorcy).

Przegląd Google Maps

W tym samouczku użyjemy JavaScript Google Maps API i HTML5 Map Widget. Widżet mapy HTML5 wyświetla mapę skonfigurowanej okolicy. Rozmiar mapy, szerokość i długość geograficzna środka mapy, poziom powiększenia, styl mapy i inne opcje mogą być skonfigurowane zgodnie z początkowymi preferencjami i aktualizowane na bieżąco.

Interfejs API JavaScript Google Maps zapewnia opcję wywołania zwrotnego inicjalizacji, która wywołuje określoną funkcję podczas ładowania mapy. Ponadto będziemy korzystać z funkcji takich jak Map Markers i Polylines, które umożliwiają umieszczanie przyjaznych znaczników mapy i ścieżek lotu na mapie w określonych przez użytkownika lokalizacjach (części 2, 3 i 4). Wszystkie punkty są określane przez użytkownika i mogą być aktualizowane w czasie rzeczywistym.

Przewodnik po kodzie

Aby pracować z kodem, będziesz chciał rozwidlić go do własnego projektu za pomocą CodePen lub pobrać kod HTML do pliku i uruchomić go za pomocą ulubionego serwera HTTP. Zalecamy edycję kodu w webowym IDE CodePen w ten sposób:

Po przejściu do IDE będziesz mógł wprowadzić drobne zmiany w kodzie, aby szybko uruchomić aplikację.

Konfiguracja i konfiguracja aplikacji

Struktura strony internetowej powinna być znajoma, jeśli w przeszłości pracowałeś z aplikacjami internetowymi. Zaczynamy od zwykłej aplikacji HTML5 + JavaScript, która ma znacznik DIV do wyświetlania mapy. Dołączamy bibliotekę PubNub do komunikacji w czasie rzeczywistym w HEAD strony HTML.

Będziesz także chciał dołączyć interfejs API Map Google za pomocą tagu SCRIPT u dołu strony HTML. Sprawdź oficjalną dokumentację Google Maps, aby uzyskać najnowszą wersję.

Pamiętaj, że musisz zastąpić klucz API map zastępczych i wersję w atrybucie SCRIPT SRC odpowiednio powyżej.

Warto wspomnieć, że aby lokalizacja HTML5 działała, będziesz polegać na tym, że użytkownik wyraźnie zezwoli na dostęp lokalizacji do aplikacji na swoim urządzeniu. Obsługa łagodnego trybu awaryjnego w przypadkach, gdy odmówiono zezwolenia na lokalizację, wykracza poza zakres tego samouczka. Ważne jest jednak, aby upewnić się, że obsługujesz te przypadki w swojej ostatecznej aplikacji, aby zapewnić najlepsze wrażenia użytkownika.

Ustawienia PubNub są zawarte w prostej mapie JavaScript. Możesz zaktualizować je własnymi wartościami w następujący sposób:

pubnub = new PubNub({
    publishKey : "myPublishKey",
    subscribeKey : "mySubscribeKey",
    userId: "myUniqueUserId"
});

Uruchamianie kodu

Nie musisz robić nic specjalnego, aby uruchomić aplikację w CodePen - uruchamia się ona automatycznie z edytora online. W zależności od miejsca wyświetlania aplikacji (geolokalizacja) i możliwości połączenia (Wi-Fi lub LTE), mogą być zgłaszane różne lokalizacje (IP do geo w porównaniu z lokalizacją GPS). Zauważyliśmy, że różne urządzenia, a także różne przeglądarki, mają własną charakterystykę dokładności lokalizacji, niektóre bardziej dokładne niż inne.

Następne kroki

Dzięki temu mamy już skonfigurowaną naszą aplikację. W części drugiej zaimplementujemy znaczniki mapy na żywo, które identyfikują lokalizację urządzenia na mapie.

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.