So erstellen Sie eine Einkaufszentrumkarte mit Echtzeitdaten mit WRLD

Dieses Tutorial zeigt, dass das Erstellen interaktiver, Echtzeit-3D-Mall-Karten mit WRLD, die Benutzererfahrung mit dynamischen Speicherinformationen und Navigation verbessert. Wir werden zwei Demos erstellen: eines fügen interaktive Markierungen zu einer Innenstadtkarte hinzu, die andere mit Parkkapazität mit farbigen Polygonen. Das komplette Projekt ist auf Github verfügbar.

Über einfache Google-Maps hinaus ermöglicht WRLD 3D-Karten mit interaktiven Markern und bietet einzigartige Benutzererfahrungen und In-Map-UI-Interaktionen.

Dieses Tutorial Covers:

• Einrichten: Erhalten Sie einen WRLD -API -Schlüssel und Vorbereitung Ihrer Entwicklungsumgebung (Node.js, NPM, Garn).
• Zwei Ansätze: Verwenden von WRLD-integrierten Tools (Kartendesigner, Plätze Designer) für eine codfreie Lösung oder erstellen Sie eine benutzerdefinierte App für eine größere Flexibilität.
• Innenkartensteuerung: Implementieren von Steuerelementen für die einfache Bodennavigation innerhalb des Einkaufszentrums.
• Automatische Innenansicht: Einstellen der Karte, um automatisch in Innenansicht zu laden.
• benutzerdefinierte Store-Karten: Erstellen von Dynamic-Store-Karten mit Echtzeitdaten (Werbeaktionen, Verfügbarkeit).
• Parkverfügbarkeitsvisualisierung: Verwenden von farbigen Polygonen, um die Belegung des Parkplatzes darzustellen.

Voraussetzungen:

grundlegendes Verständnis von JavaScript DOM-, ES6 -Syntax- und ES6 -Modulen. Die Vertrautheit mit der WRLD -Plattform ist hilfreich, aber nicht erforderlich.

Erste Schritte:

Erstellen Sie ein kostenloses WRLD -Konto und erhalten Sie Ihren API -Schlüssel (siehe "Dynamic 3D -Karten" für Anweisungen).

Erstellen der Karte (benutzerdefinierter App -Ansatz):

1. Projekt -Setup: Erstellen Sie einen Projektordner, initialisieren Sie package.json und erstellen Sie die erforderlichen Verzeichnisse und Dateien .js).
2. Abhängigkeiten: Installieren Sie wrld.js, axios, Babel (für ES6 -Kompilierung), Paket (Bundler) und JSON -Server (für eine Dummy -API).
3. API -Schlüssel: Fügen Sie Ihren WRLD -API -Schlüssel zu env.js.
hinzu
4. Grundlegende Karte: Erstellen Sie eine Grundkarte mit Wrld.map() in app.js, geben Sie Ihre API -Taste an, Mittelkoordinaten, Zoomebene und Aktivieren von Innenkarten.
5. Innensteuerungen: Fügen Sie die erforderlichen Skripte (jQuery, jQuery ui, indoor_control.js) und einen Container -Div (widget-container) zu index.html hinzu. Initialisieren Sie die Innensteuerung in app.js.
6. Automatischer Inneneintrag: Bestimmen Sie die Innenkarten -ID aus dem Ereignis indoormapenter und verwenden Sie map.indoors.enter(), um die Innenansicht auf MAP -Last automatisch einzugeben.
7. Kartendaten speichern: Erstellen Sie einen data -Firde und füllen Sie ihn mit db.json enthalten, die Speicherinformationen enthalten (Koordinaten, Kontaktdaten, Öffnungszeiten). Führen Sie json-server --watch data/db.json aus, um einen lokalen API -Server zu erstellen.
8. Store -Kartendesign und -implementierung: HTML -Vorlagen für die Store -Karten (mit JSRender) und einen Dienst (api-service.js) erstellen, um Daten vom JSON -Server abzurufen. Implementieren Sie einen Popup -Dienst (popup-service.js), um die Storekarten in Popups auf Markerklicks anzuzeigen. Fügen Sie der Karte in app.js Markierungen hinzu, um Klick -Listener anzuschließen, um den Popup -Dienst auszulösen.
9. Parkverfügbarkeit: Erstellen Sie eine separate HTML -Datei (parking.html) und eine JavaScript -Datei (parking.js). Sammeln Sie Koordinaten für Parkzonen und erstellen Sie Polygone mit Wrld.polygon(). Verwenden Sie Farbkodierung, um die Parkbelegung darzustellen. Implementieren Sie Echtzeit-Updates mit Socket.io (install socket.io, socket.io-client). Erstellen Sie einen benutzerdefinierten Server (server.js), um Socket.io -Verbindungen und Parkplätze zu verarbeiten. Aktualisieren Sie den clientseitigen Code, um diese Updates anzuhören und zu verarbeiten.

Diese detaillierte Aufschlüsselung bietet einen umfassenden Leitfaden zum Aufbau dieser interaktiven 3D -Karten. Denken Sie daran, die bereitgestellten Links für vollständige Codeausschnitte und weitere Details zu konsultieren. Die Möglichkeiten für die Erweiterung dieser Demos sind groß und ermöglichen die Integration in reale Datenquellen und eine breite Palette von Anwendungen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Einkaufszentrumkarte mit Echtzeitdaten mit WRLD. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!