Übersicht der Steuerelemente
Die Karten, die über die 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 Steuerelemente bezeichnet. Sie können sie in die Benutzeroberfläche einfügen oder nicht. Wenn Sie die UI-Steuerelemente unterdrücken, kann der Nutzer trotzdem mithilfe von Tastenkombinationen auf der Karte navigieren.
Die API „Fotorealistische 3D-Karten in Google Maps – JavaScript“ unterstützt auch die Möglichkeit, Nutzer mithilfe von voreingestellten Kamerapfaden auf der Karte zu führen. Diese Pfade können angepasst und kombiniert werden, um ansprechende 3D-Erlebnisse zu schaffen.
Einstellungen für die explorative Datenanalyse
Auf dem folgenden Bild sehen Sie die Steuerelemente, die standardmäßig von fotorealistischen 3D-Karten in der Maps JavaScript API angezeigt werden:
Die folgende Liste enthält alle Steuerelemente in 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 Drehungssteuerung können Sie die Ausrichtung der Kamera ändern.
- Das Steuerelement zum Verschieben besteht aus den Schaltflächen „←“, „→“, „↑“ und „↓“, mit denen der Mittelpunkt der Karte geändert werden kann.
Das folgende Codebeispiel zeigt, wie die Steuerelemente für die explorative Analyse ein- und ausgeschaltet werden:
JavaScript
const map = new Map3DElement({
center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
tilt: 75,
heading: 330,
mode: MapMode.SATELLITE,
defaultUIDisabled: true,
});
HTML
<gmp-map-3d
mode="hybrid"
range="639.274301042242"
tilt="64.92100184857551"
center="34.0768990953219,-118.47450491266041,292.9794737933403"
heading="-61.02026752077781"
default-ui-disabled
></gmp-map-3d>
Voreingestellte Kamerapfade
Die Klasse „Fotorealistische 3D-Karten in Google Maps – JavaScript“ bietet zwei voreingestellte Kamerapfade. Die Kamerapfade lassen sich anpassen, indem Sie die Dauer der Animation ändern (wodurch sich die Geschwindigkeit erhöht oder verringert) oder sie kombinieren, um filmreifere Szenen zu erstellen.
Die Klasse „Fotorealistische 3D-Karten in Google Maps – JavaScript“ unterstützt die folgenden Kamerapfade:
- Die
flyCameraTo-Animation fliegt von der Kartenmitte zu einem angegebenen Ziel. - Bei der
flyCameraAround-Animation wird um einen Punkt auf der Karte die angegebene Anzahl von Runden gedreht.
Die beiden verfügbaren Pfade können kombiniert werden, um zu einem interessanten Ort zu fliegen, sich um ihn zu drehen und dann anzuhalten, wenn angegeben.
Anfliegen
Das folgende Codebeispiel zeigt, wie die Kamera animiert wird, um zu einem Ort zu fliegen:
const map = document.querySelector('gmp-map-3d');
async function init() {
await google.maps.importLibrary('maps3d');
map.flyCameraTo({
endCamera: {
center: { lat: 37.6191, lng: -122.3816 },
tilt: 67.5,
range: 1000
},
durationMillis: 5000
});
}
Umherfliegen
Das folgende Codebeispiel zeigt, wie die Kamera animiert wird, um einen Ort zu umrunden:
const map = document.querySelector('gmp-map-3d');
async function init() {
await google.maps.importLibrary('maps3d');
map.flyCameraAround({
camera,
durationMillis: 60000,
rounds: 1
});
}
Animationen kombinieren
Im folgenden Codebeispiel wird gezeigt, wie Animationen kombiniert werden, um die Kamera zu einer Position zu bewegen und dann um diese Position zu drehen, wenn die erste Animation endet:
const map = document.querySelector('gmp-map-3d');
async function init() {
await google.maps.importLibrary('maps3d');
map.flyCameraTo({
endCamera: flyToCamera,
durationMillis: 5000,
});
map.addEventListener('gmp-animation-end', () => {
map.flyCameraAround({
camera: flyToCamera,
durationMillis: 60000,
rounds: 1
});
}, {once: true});
}