Geolocation Tracking mit der Google Maps API

Dies ist der dritte Teil unserer vierteiligen Serie über die Erstellung von Echtzeit-Karten und die Geolocation-API zur Verfolgung von Geräten mithilfe der Google Maps-Plattform und PubNub.

Was ist Geolocation Tracking?

In diesem Einsteiger-Tutorial erstellen wir eine App, die die in Teil 2 erstellten Google Maps JavaScript API-Kartenmarker mit Live-Geolocation-Funktionen aktualisiert. Wir verwenden die HTML5-Geolocation-API, um den Standort des Benutzers von seinem Gerät zu erfassen und Standortänderungen (basierend auf dem vom Gerät selbst gemeldeten Standort) zu streamen und auf der Karte zu veröffentlichen, indem wir PubNub Real-time Messaging verwenden - Standortverfolgung in Echtzeit!

Tutorial Übersicht

Der Code für dieses Beispiel ist hier in CodePen verfügbar.

Beachten Sie, dass Sie Ihren eigenen API-Schlüssel von der Google Cloud Platform angeben müssen, um die Demo zu aktivieren.

Falls Sie dies noch nicht getan haben, müssen Sie sich zunächst um einige Voraussetzungen kümmern, die wir in Teil eins und zwei behandelt haben, wo wir unsere JavaScript-Umgebung eingerichtet und mit Kartenmarkierungen begonnen haben.

Nachdem wir nun alle relevanten Konfigurationseinstellungen vorgenommen und unsere Kartenmarkierungen erstellt haben, können wir mit dem Sammeln und Veröffentlichen von Standortdaten für unsere Web- oder mobile Webkarte beginnen.

Code-Transparenz

Wir haben unser DIV für die Anwendung und das DIV für die Karte bereits aus unserem vorherigen Tutorial eingerichtet. Jetzt ist es an der Zeit, die HTML5-Standort-API zu verwenden, um unseren Standort in Echtzeit zu aktualisieren.

HTML5-Standort-API

Gehen wir einen Schritt nach dem anderen an. Zunächst legen wir einen anfänglichen Breiten- und Längengrad in der allgemeinen Umgebung von San Francisco fest. Dann erstellen wir eine Funktion, um den Standort des Geräts mithilfe der HTML5-Standort-API zu ermitteln und die Standortvariablen des Browsers zu aktualisieren. Wir setzen einen Intervall-Timer für die regelmäßige Abfrage des Geräte-Standorts. Der Einfachheit halber geben wir ein JavaScript-Objekt zurück, das diese Werte als Breiten- und Längengrad enthält.

Der folgende JavaScript-Codeausschnitt zeigt, wie man den aktuellen Standort des Benutzers abruft:

<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, jetzt, wo wir den HTML5-Standortkram aus dem Weg geräumt haben, kommen wir zu den guten Dingen.

Aktueller Standort

Wir definieren Karten- und Markierungsvariablen, um unsere Karten- und Markierungsobjekte zu speichern, damit wir sie während des Eintreffens von PubNub-Ereignissen manipulieren können. Dann definieren wir den Initialisierungs-Callback, den die Google Maps JavaScript-API aufrufen kann, wenn sie zum Laden bereit ist, und stellen sicher, dass er ein Mitglied des Fensterobjekts ist, damit die API darauf zugreifen kann.

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;

Als Nächstes definieren wir einen Redraw-Event-Handler, den wir immer dann aufrufen, wenn wir ein neues Positionsänderungs-Ereignis 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 Karten- und Markierungsobjekten auf, um die Position zu aktualisieren und die Karte neu zu zentrieren.

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

Nachdem wir nun unsere Rückrufe definiert haben, verfügen wir über alle notwendigen Mittel, um die PubNub-Echtzeitdaten-Streaming-Funktionalität zu initialisieren. Als Erstes legen wir den Namen des Kanals fest, auf dem wir neue Positionsaktualisierungen erwarten. Dann initialisieren wir die PubNub-Bibliothek mit den Publish- und Subscribe-Schlüsseln, die wir zuvor in Schritt 1 der Voraussetzungen eingerichtet haben.

Schließlich weisen wir die PubNub-Bibliothek an, den entsprechenden Kanal zu abonnieren und die Redraw-Funktion als Listener auf die eingehenden Ereignisse zu setzen. Was erzeugt diese Ereignisse, werden Sie sich fragen? Bleiben Sie dran!

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

Lat/Long veröffentlichen

Für dieses einfache Tutorial richten wir einen einfachen JavaScript-Intervalltimer ein, um neue Positionen auf der Grundlage der aktuellen Zeit zu veröffentlichen. Alle 5000 Millisekunden rufen wir die anonyme Callback-Funktion auf, die ein neues Latitude/Longitude-Objekt (erstellt durch den currentLocation()-Aufruf) auf dem angegebenen PubNub-Kanal veröffentlicht.

setInterval(function() {
  pubnub.publish({channel:pnChannel, message:currentLocation()});
}, 5000);
</script>

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

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_GOOGLE_MAPS_API_KEY&callback=initialize"></script>
  </body>
</html>

Nächste Schritte

Wir sind zu 75 % fertig, und jetzt ist es an der Zeit, unsere letzte Funktion in Teil vier hinzuzufügen : Flugpfade! Flugpfade zeigen an, welche Route unser Gerät genommen hat, indem sie eine Spur hinter der Kartenmarkierung zeichnen.

Inhalt

Was ist Geolocation Tracking?Tutorial ÜbersichtCode WalkthroughHTML5 Location APILive LocationPublishing Lat/LongNächste Schritte

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.