JavaScript Geolocation Tracking mit Google Maps API

Hier ist der aktualisierte Blogbeitrag, in den alle Schlüsselwörter nahtlos eingebettet sind.

Dies ist der Abschluss der vierteiligen Serie über die Erstellung von Live-Echtzeit-Webanwendungen mit Geolokalisierungsfunktionen mithilfe der Google Maps JavaScript API und PubNub. Unser Tutorial führt Sie durch die Benutzererfahrung bei der Erstellung von Flugrouten mit JavaScript und PubNub.

Ein Beispiel dafür, wie dies alles umgesetzt wird, finden Sie in unserer Showcase-Demo auf der PubNub-Website. Navigieren Sie zur Geolocation-Demo, um zu sehen, wie wir PubNub mit Echtzeit-Tracking einbinden. Den Code hinter der Demo finden Sie auf unserer Github-Website.

Was sind Flugpfade?

Flugpfade, wie sie in diesem Tutorial implementiert sind, beziehen sich auf Polylinien, die das dynamische Zeichnen von Pfaden durch benutzerdefinierte Punkte auf einer Karte ermöglichen, die sich entweder auf Ihrem mobilen Gerät oder im Webbrowser befindet. Sie sind integraler Bestandteil der HTML5 Geolocation API und der Google Maps API zur Verfolgung von Bewegungsmustern.

Überblick über das Tutorial

Vergewissern Sie sich, dass Sie die Voraussetzungen aus den Teilen eins, zwei und drei erfüllt haben, , in denen wir unsere JavaScript-Umgebung eingerichtet und Kartenmarkierungen und Standortverfolgung behandelt haben.

Wenn Sie dies getan haben, fahren Sie mit dem nächsten Teil fort.

Code-Walkthrough

Beginnen wir mit der Definition der let'-Variablen \map, \markund \lineCoords, um unsere Karten-, Markierungs- und **Polylinien-Koordinatenobjekte** zu speichern. Auf diese Weise können wir sie anpassen, wenn PubNub-Ereignisse eintreffen. Anschließend definieren wir den \initialize-Callback, der von der [Google Maps JavaScript-API](https://developers.google.com/maps/documentation/javascript/overview) verwendet werden kann, wenn sie bereit zum Laden ist. Stellen Sie sicher, dass Sie \YOUR_GOOGLE_MAPS_API_KEY` durch Ihren tatsächlichen API-Schlüssel ersetzen.

js
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;


Mit dem 'redraw'-Ereignishandler aktualisieren wir nun die neuen Standortinformationen, indem wir die Methode 'getCurrentPosition()' von Geolocation aufrufen.

Lat/Long

Als Nächstes definieren wir einen "redraw"-Ereignishandler, den wir immer dann aufrufen, wenn wir ein neues Positionsänderungsereignis erhalten. Im ersten Teil der Funktion setzen wir den Breiten- und Längengrad auf die neuen Werte aus der Nachricht. Dann rufen wir die entsprechenden Methoden auf den Objekten Karte, Marker und Polylinie auf, um die Position zu aktualisieren, sie dem Ende der Linie hinzuzufügen und die Karte neu zu zentrieren.

js
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);
};


PubNub initialisieren

Nachdem wir unsere Callbacks definiert haben, initialisieren wir die PubNub-Echtzeitdaten-Streaming-Funktionalität, die auf Mobiltelefonen, Tablets, Browsern und Laptops über Tech-Stacks wie iOS, Android, JavaScript, .NET, Java, Ruby, Python, PHP und mehr funktioniert.

js
const pnChannel = "map3-channel";
const pubnub = new PubNub({
publishKey: 'YOUR_PUB_KEY',
subscribeKey: 'YOUR_SUB_KEY'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw});


Die PubNub-Funktionalität zum Veröffentlichen und Abonnieren von Themen in Echtzeitkanälen bietet effiziente Daten-Streaming-Funktionen.

Veröffentlichung von Lat/Long

Für dieses einfache Tutorial richten wir einen einfachen JavaScript-Intervall-Timer ein, um neue Positionen auf der Grundlage der aktuellen Zeit zu veröffentlichen. Alle 500 Millisekunden rufen wir die anonyme Callback-Funktion auf, die ein neues Latitude/Longitude-Objekt (mit Koordinaten, die sich nach Nordosten bewegen) im angegebenen PubNub-Kanal veröffentlicht. In Ihrer Anwendung werden Sie die Position wahrscheinlich von einer Live-Geräteposition oder einem vom Benutzer gemeldeten Standort erhalten.

js
setInterval(function() {
pubnub.publish({channel:pnChannel, message:{lat:window.lat + 0.001, lng:window.lng + 0.01}});
}, 500);


Zu guter Letzt initialisieren wir die Google Maps API, um sicherzustellen, dass die DOM-Elemente und JavaScript-Voraussetzungen erfüllt sind.

`js

`

Zusammenfassung

Diese Tutorial-Serie hat uns gezeigt, wie die Google Maps API und PubNub außergewöhnlich gut für die Echtzeit-Standortverfolgung in Web- und Mobil-Apps zusammenarbeiten. Dies ist vergleichbar mit der Art und Weise, wie Ride-Hailing-Dienste wie Uber und Lyft die Bewegung ihrer Fahrzeuge in Echtzeit anzeigen.

PubNub erleben

Schauen Sie sich die Live Tour an, um in weniger als 5 Minuten die grundlegenden Konzepte hinter jeder von PubNub betriebenen App zu verstehen. Hören Sie sich die Erfahrungen unserer Nutzer direkt auf unserer GitHub-Seite und in den Testimonials auf unserer Website an.

Einrichten

Melden Sie sich für einen PubNub-Account an, um sofort kostenlosen Zugang zu PubNub-Schlüsseln zu erhalten.

Starten Sie

Die PubNub-Dokumente werden Sie unabhängig von Ihrem Anwendungsfall zum Laufen bringen. Wir haben Abschnitte, die der JavaScript Google Maps API gewidmet sind und wie man sie mit Echtzeit-Tracking in unserem SDK verwendet.