Dies ist der zweite Teil unserer vierteiligen Serie über die Erstellung von Echtzeit-Karten mit Geolocation-Tracking für Web und Mobile Web unter Verwendung der JavaScript Google Maps API und PubNub.

Was sind Kartenmarkierungen?

In diesem Tutorial fügen wir unserer Web- oder mobilen Webkarte Kartenmarkierungen hinzu. Kartenmarkierungen werden verwendet, um den Standort eines Nutzers oder eines Geräts auf der Karte zu identifizieren. Für den Einstieg in die Funktionalität platzieren wir eine einzelne Kartenmarkierung auf unserer Karte und aktualisieren ihre Position nach dem Zufallsprinzip. In den nächsten Abschnitten werden wir die Kartenmarkierung basierend auf dem tatsächlichen Standort des Geräts verschieben.


Tutorial-Übersicht

Falls Sie es noch nicht getan haben, müssen Sie sich zunächst um einige Voraussetzungen kümmern, die wir im ersten Teil behandelt haben. Dazu gehören:

• Erstellen Ihrer PubNub-Anwendung, einschließlich Publish und Subscribe Keys
• Erstellen Ihres Google Maps API-Projekts und Ihrer Anmeldeinformationen

Der Code für dieses Beispiel ist hier als Codepen verfügbar.

Code Walkthrough

Diese Codestruktur sollte Ihnen vertraut sein, wenn Sie bereits mit HTML5-Anwendungen gearbeitet haben. Wir beginnen mit einer einfachen HTML5-Anwendung und binden die PubNub-Bibliothek für die Echtzeitkommunikation und Bootstrap-CSS für minimales Styling ein.

<!doctype html>
<html>
  <head>
    <title>Google Maps Tutorial</title>
    <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  </head>
  <body>

Falls Sie sich fragen, wo die Google Maps-API eingebunden ist: Sie befindet sich ganz am Ende der HTML5-Seite. Dadurch wird sichergestellt, dass der gesamte DOM für den Kartencode verfügbar ist.

Als Nächstes erstellen wir ein DIV für die Anwendung und darin ein DIV, das die Karte enthält. In unserem Fall verwenden wir Inline-CSS für die Breite und Höhe. In einer echten Produktionsanwendung würden Sie dieses Styling wahrscheinlich an anderer Stelle definieren. Genau darüber haben wir gesprochen, als wir sagten, dass wir das Google Maps-Skript nach der Definition des Map Canvas DOM-Elements einfügen wollten.

<div class="container">
  <h1>PubNub Google Maps Tutorial - Live Map Marker</h1>
  <div id="map-canvas" style="width:600px;height:400px"></div>
</div>

Jetzt müssen wir uns durch einen Haufen JavaScript kämpfen. Gehen wir einen Schritt nach dem anderen.

Breitengrad/Längengrad

Zunächst legen wir einen anfänglichen Breitengrad und Längengrad in der allgemeinen Umgebung von San Francisco fest. Dann definieren wir eine Funktion, die einen Punkt auf einem Kreis auf der Grundlage der aktuellen Zeit angibt. Wir definieren einen Radius (in Grad lat/lng). Wir nehmen eine Zeit an (in Epochensekunden).

Durch die Magie der Trigonometrie ist der Punkt auf dem Kreis gegeben durch x = "Anfangslänge plus Kosinus der Eingabe mal Radius" und y = "Anfangsbreite plus Sinus der Eingabe mal Radius". Der Einfachheit halber geben wir ein JavaScript-Objekt zurück, das diese Werte als Breitengrad und Längengrad enthält.

<script>
window.lat = 37.7850;
window.lng = -122.4383;
function circlePoint(time) {
  var radius = 0.01;
  var x = Math.cos(time) * radius;
  var y = Math.sin(time) * radius;
  return {lat:window.lat + y, lng:window.lng + x};
};

Verschieben der Position der Kartenmarkierung

Nun, da wir die Mathematik aus dem Weg geräumt haben, kommen wir zu den guten Dingen. 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});
};

Verbinden der Karte mit PubNub

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?

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

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 500 Millisekunden rufen wir die anonyme Callback-Funktion auf, die ein neues Latitude/Longitude-Objekt (erstellt durch den circlePoint()-Aufruf) auf dem angegebenen PubNub-Kanal veröffentlicht.

setInterval(function() {
  pubnub.publish({channel:pnChannel, message:circlePoint(new Date().getTime()/1000)});
}, 500);
</script>

Initialisierung von Google Maps

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

Damit haben wir nun unsere JavaScript-Kartenanwendung und können Kartenmarkierungen einzeichnen. Der nächste Schritt besteht darin, den Standort des Geräts zu erkennen und ihn in Echtzeit darzustellen, indem wir ihn bei Änderungen des Standorts verschieben, was wir in Teil 3 über Geolokalisierung behandeln werden!

Verwandte Begriffe

• Wegbeschreibung API

• GIS

• Karten-API

• Was ist eine Geolocation-API?

Inhalt

Was sind Kartenmarkierungen?Tutorial-ÜbersichtCode-WalkthroughBreitengrad/LängengradVerschiebenderPosition der KartenmarkierungVerbinden derKarte mit PubNubInitialisierung vonGoogle MapsWeitereSchritteVerwandteBegriffe

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