Bevor wir mit diesem Tutorial beginnen, melden Sie sich für ein PubNub-Konto an, um Ihre API-Schlüssel zu erhalten. Wir bieten eine großzügige Sandbox-Stufe an, die Sie keinen Cent kostet, bis es an der Zeit ist, zu skalieren!

DieGeolocation- und Tracking-Funktionen werden ständig weiterentwickelt. Wir haben uns über statische Karten hinaus in den Bereich der interaktiven und dynamischen API-Mapping-Technologie bewegt. Dieser Wandel hat die unverzichtbare Rolle unterstrichen, die eine Geolocation-API in jeder Branche spielt, von der On-Demand-Wirtschaft bis zum Internet der Dinge.

Tracking in Echtzeit ist ein weites Feld, nicht wahr?

Übersicht über das Google Maps-Tracking-Tutorial

Dies ist ein vierteiliges Tutorial zur Erstellung von Echtzeit-Karten für das Web und das mobile Web unter Verwendung der Google Maps JavaScript API und PubNub. Wir beginnen mit den Grundlagen, um Ihre Anwendung einzurichten, und fügen dann in den folgenden Teilen Echtzeit-Geolokalisierungsfunktionen hinzu.

Am Ende haben Sie eine grundlegende JavaScript-Standortverfolgungs-App mit Kartenmarkierungen, Geräte-Standortverfolgung und Flugpfaden, die von der JavaScript Google Maps API und PubNub unterstützt wird.

Einrichtung der Echtzeit-Standort-API

Tutorial-Assets

Für dieses Tutorial gehen wir davon aus, dass Sie mit einem aktuellen Evergreen-Browser auf einem Desktop oder einem mobilen Gerät arbeiten.

PubNub-Einrichtung

Um loszulegen, benötigen Sie zunächst Ihre PubNub-Veröffentlichungs- und Abonnementschlüssel. Wenn Sie noch keinen Account haben, können Sie sich hier anmelden. Ihre Pub/Sub-Schlüssel sind dann im Admin Dashboard verfügbar. Die Schlüssel ähneln UUIDs und beginnen mit den Präfixen "pub-c-" und "sub-c-".

Sobald Sie Ihre Pub/Sub-Schlüssel haben, erstellen Sie eine neue PubNub-Anwendung, die Ihre Android-Anwendung (und alle anderen Systeme, die über dieselben Kanäle kommunizieren) repräsentiert. Die PubNub-Anwendung enthält Veröffentlichungs- und Abo-Schlüssel, die Anwendungen für die angegebenen Funktionen verwenden können.

Google Maps API-Einrichtung

Für die Integration mit Google Maps müssen Sie einen Google Maps API-Schlüssel erstellen. Wir empfehlen, dies mit Hilfe des Getting Started Guides hier zu tun. Dadurch wird ein eindeutiger API-Schlüssel erstellt, der für beliebige Webanwendungen gesperrt werden kann. Sobald Sie begonnen haben, eine Reihe von Projekten zu erstellen, können Sie Ihre Anmeldeinformationen in der Google API-Konsole hier verwalten.

Vergessen Sie nicht, nach der Erstellung Ihres API-Schlüssels die "Maps JavaScript API" in der Google Cloud-Konsole zu aktivieren.

Überblick über die Echtzeit-Standort-API

In dieser HTML5- und JavaScript-Beispielanwendung stellt PubNub die Echtzeit-Kommunikationsfähigkeit bereit, die es unserer Webanwendung ermöglicht, eingehende Ereignisse zu empfangen, wenn sich die Position eines entfernten Objekts (Breiten- und Längengrad) ändert.

Die Kernfunktionalität von PubNub, die wir verwenden, ist das Real-Time Messaging. Unsere Anwendung verwendet einen PubNub-Kanal zum Senden und Empfangen von Positionsänderungsereignissen. In diesem Beispiel sendet und empfängt dieselbe Anwendung die Positionsereignisse, d. h. sie ist sowohl Herausgeber als auch Teilnehmer. In Ihrer Anwendung kann das System des Herausgebers (Absenders) ein anderes sein als das System des Teilnehmers (Empfängers).

Google Maps Überblick

Für diesen Lehrgang verwenden wir die JavaScript Google Maps API und das HTML5 Map Widget. Das HTML5-Karten-Widget zeigt eine Karte der Umgebung an, die Sie konfigurieren. Die Kartengröße, der Breiten- und Längengrad der Kartenmitte, die Zoomstufe, der Kartenstil und andere Optionen können nach Ihren anfänglichen Präferenzen konfiguriert und laufend aktualisiert werden.

Die JavaScript-API von Google Maps bietet eine Initialisierungs-Callback-Option, die eine von Ihnen angegebene Funktion aufruft, wenn die Karte geladen wird. Darüber hinaus werden wir Funktionen wie Kartenmarkierungen und Polylinien verwenden, mit denen Sie freundliche Kartenmarkierungen und Flugwege an den von Ihnen angegebenen Stellen auf der Karte platzieren können (Teile 2, 3 und 4). Alle Punkte sind benutzerspezifisch und können in Echtzeit aktualisiert werden, wenn neue Informationen eintreffen.

Code-Durchgang

Um mit dem Code zu arbeiten, sollten Sie ihn mit CodePen in Ihr eigenes Projekt einbinden oder den HTML-Code in eine Datei herunterladen und mit Ihrem bevorzugten HTTP-Server ausführen. Wir empfehlen, den Code in der CodePen-Web-IDE wie folgt zu bearbeiten:

Sobald Sie in der IDE sind, können Sie kleinere Codeänderungen vornehmen, um die Anwendung schnell zum Laufen zu bringen.

Einrichtung und Konfiguration der Anwendung

Die Struktur der Webseite sollte Ihnen vertraut sein, wenn Sie bereits mit Webanwendungen gearbeitet haben. Wir beginnen mit einer einfachen HTML5 + JavaScript-Anwendung mit einem DIV-Tag für die Kartenanzeige. Wir binden die PubNub-Bibliothek für die Echtzeitkommunikation in den HEAD der HTML-Seite ein.

Sie sollten auch die Google Maps-API mit einem SCRIPT-Tag am unteren Ende der HTML-Seite einbinden. In der offiziellen Google Maps-Dokumentation finden Sie die neueste Version.

Beachten Sie, dass Sie den Platzhalter Maps-API-Schlüssel und die Version im SCRIPT-SRC-Attribut wie oben beschrieben ersetzen müssen.

Es ist erwähnenswert, dass Sie sich, damit die HTML5-Standortbestimmung funktioniert, darauf verlassen, dass der Benutzer den Standortzugriff auf Ihre Anwendung auf seinem Gerät explizit zulässt. Der Umgang mit einem "Graceful Fallback" für Fälle, in denen der Standortzugriff verweigert wird, geht über den Rahmen dieses Tutorials hinaus. Es ist jedoch wichtig, dass Sie diese Fälle in Ihrer endgültigen Anwendung behandeln, um die beste Benutzererfahrung zu bieten.

Die PubNub-Einstellungen sind in einer einfachen JavaScript-Map enthalten. Sie können sie wie folgt mit Ihren eigenen Werten aktualisieren:

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

Ausführen des Codes

Sie müssen nichts Besonderes tun, um die Anwendung in CodePen auszuführen - sie wird automatisch vom Online-Editor aus gestartet. Je nachdem, wo Sie die App anzeigen (Geolocation) und wie gut Ihre Verbindung ist (WiFi oder LTE), werden möglicherweise unterschiedliche Standorte angezeigt (IP zu Geo versus GPS-Standort). Wir haben festgestellt, dass verschiedene Geräte sowie verschiedene Browser ihre eigenen Merkmale für die Standortgenauigkeit haben, einige genauer als andere.

Nächste Schritte

Damit haben wir unsere App eingerichtet. Im zweiten Teil werden wir Live-Kartenmarkierungen implementieren, die anzeigen, wo sich ein Gerät auf einer Karte befindet.

Wie kann PubNub Ihnen helfen?

Dieser Artikel wurde ursprünglich auf PubNub.com veröffentlicht.

Unsere Plattform unterstützt Entwickler bei der Erstellung, Bereitstellung und Verwaltung von Echtzeit-Interaktivität für Webanwendungen, mobile Anwendungen und IoT-Geräte.

Die Grundlage unserer Plattform ist das größte und am besten skalierbare Echtzeit-Edge-Messaging-Netzwerk der Branche. Mit über 15 Points-of-Presence weltweit, die 800 Millionen monatlich aktive Nutzer unterstützen, und einer Zuverlässigkeit von 99,999 % müssen Sie sich keine Sorgen über Ausfälle, Gleichzeitigkeitsgrenzen oder Latenzprobleme aufgrund von Verkehrsspitzen machen.

PubNub erleben

Sehen Sie sich die Live Tour an, um in weniger als 5 Minuten die grundlegenden Konzepte hinter jeder PubNub-gestützten App zu verstehen

Einrichten

Melden Sie sich für einen PubNub-Account an und erhalten Sie sofort kostenlosen Zugang zu den PubNub-Schlüsseln

Beginnen Sie

Mit den PubNub-Dokumenten können Sie sofort loslegen, unabhängig von Ihrem Anwendungsfall oder SDK