Auf dieser Seite finden Sie Informationen zu den wichtigsten Funktionen der Klasse „Fotorealistische 3D-Karten in Google Maps – JavaScript“, mit denen Sie interaktive und immersive 3D-Inhalte erstellen können. Die folgende Dokumentation deckt folgende Themen ab:
- Verarbeitung von Ereignissen der Benutzeroberfläche für eine nahtlose Interaktion.
- Dazu gehören Steuerelemente für die Navigation in 3D-Bereichen.
- Vordefinierte Kamerapfade für geführte Touren verwenden
- Kameraeinschränkungen anwenden, um den Fokus auf einen bestimmten Bereich zu halten
Ereignisse auf der Benutzeroberfläche
In diesem Abschnitt werden die interaktiven Ereignisse und Benachrichtigungen zu Statusänderungen beschrieben, die Sie bei der Arbeit mit 3D-Karten programmatisch erfassen und verarbeiten können. JavaScript im Browser ist ereignisgesteuert. Das bedeutet, dass es auf Nutzerinteraktionen reagiert, indem es Ereignisse generiert, auf die Ihr Programm warten und den Code entsprechend ausführen kann.
Es gibt zwei Haupttypen von Ereignissen:
- Nutzerinteraktionsereignisse (z. B. Mausklicks) werden vom 3D‑Karten-Viewport an Ihren Code weitergegeben. Mit diesen Ereignissen können Sie auf direkte Nutzeraktionen in der 3D-Kartenoberfläche reagieren. Beispiel ansehen
- Benachrichtigungen zu Statusänderungen geben Aufschluss über Aktualisierungen der zugrunde liegenden 3D-Kartendatenmodelle und des Rendering-Status. Dabei wird ein herkömmliches
property_changed-Benennungsschema verwendet.
Jedes 3D-Mapping API-Objekt stellt eine Reihe benannter Ereignisse bereit, für die Ihr Programm Event-Listener registrieren und Logik ausführen kann, wenn diese Ereignisse mithilfe der integrierten Funktion addEventListener() auftreten. Im folgenden Beispiel werden gängige Ereignisse veranschaulicht, die ausgelöst werden, wenn ein Nutzer mit einer 3D-Karte interagiert.
Im folgenden Beispiel wird gezeigt, welche Ereignisse ausgelöst werden, wenn ein Nutzer mit der Karte interagiert:
Steuerelemente für explorative Datenanalysen
Die Karten, die in der API „Fotorealistische 3D-Karten in Google Maps – JavaScript“ angezeigt werden, enthalten UI-Elemente, über die Nutzer mit der Karte interagieren können. Diese Elemente werden als Nutzersteuerelemente bezeichnet. Die Steuerelemente für explorative Datenanalysen sind standardmäßig enthalten. Sie können sie jedoch in Ihrer Anwendung deaktivieren.
Auf der folgenden Abbildung sind die Standardsteuerelemente zu sehen, die von der Klasse „Fotorealistische 3D-Karten in Google Maps – JavaScript“ angezeigt werden:
Die folgende Liste enthält alle Steuerelemente der Klasse „Fotorealistische 3D-Karten in Google Maps – JavaScript“:
- Die Zoomsteuerung besteht aus den Schaltflächen „+“ und „-“, mit denen die Zoomstufe der Karte geändert werden kann.
- Mit der Neigungssteuerung können Sie die Neigung der Kamera ändern.
- Mit der Drehsteuerung können Sie die Ausrichtung der Kamera ändern.
- Die Verschiebungssteuerung enthält die Schaltflächen „←“, „→“, „↑“ und „↓“, mit denen der Mittelpunkt der Karte geändert werden kann.
Kamerasteuerung und -animation
Vordefinierte Kamerapfade
Die Klasse „Fotorealistische 3D-Karten in Google Maps – JavaScript“ bietet zwei vordefinierte Kamerapfade. Die Kamerapfade können angepasst werden, indem Sie die Dauer der Animation ändern (und so die Geschwindigkeit erhöhen oder verringern) oder sie kombinieren, um einen filmischeren Look zu erzielen.
Für fotorealistische 3D-Karten in Google Maps – JavaScript werden die folgenden Kamerapfade unterstützt:
FlyCameraTo-Animation, bei der die Kamera von der Mitte der Karte zu einem bestimmten Ziel schwebt- Bei der
FlyCameraAround-Animation dreht sich die Karte um einen Punkt auf der Karte so oft, wie Sie angeben.
Die beiden verfügbaren Pfade können kombiniert werden, um zu einem Punkt von Interesse zu fliegen, sich um ihn zu drehen und dann bei Bedarf anzuhalten.
Einschränkungen für Kamera
Möglicherweise möchten Sie das Schwenken der Kamera, die maximale Höhe oder Breiten- und Längengradgrenzen festlegen, um die Bewegung eines Nutzers auf einer bestimmten Karte einzuschränken. Dazu können Sie Kameraeinschränkungen verwenden.
Ein Beispiel dafür, wie Kameraeinschränkungen funktionieren und implementiert werden, finden Sie in der Demo.