Steuerelemente und explorative Datenanalyse in 3D-Karten

Plattform auswählen: Android iOS JavaScript

Übersicht der Steuerelemente

Die Karten, die über die 3D-Karten in der Maps JavaScript API angezeigt werden, enthalten UI-Elemente, die als Steuerelemente für die Erkundung bezeichnet werden und die Nutzerinteraktion mit der Karte unterstützen. Die Steuerelemente für die Erkundung werden standardmäßig in der Karten-UI angezeigt, können aber deaktiviert werden, um die Darstellung zu vereinfachen oder Platz für benutzerdefinierte Steuerelemente zu schaffen. Tastenkombinationen für die Kartenerkundung sind verfügbar, wenn die UI-Steuerelemente deaktiviert sind.

Die 3D-Karten in der Maps JavaScript API unterstützen auch die Möglichkeit, Nutzer mithilfe voreingestellter Kamerapfade durch die Karte zu führen. Diese Pfade können angepasst und kombiniert werden, um ansprechende 3D-Erlebnisse zu schaffen.

Steuerelemente für explorative Datenanalysen

Auf der folgenden Abbildung sehen Sie die Steuerelemente, die standardmäßig von 3D-Karten in der Maps JavaScript API angezeigt werden:

Bild einer Karte mit Steuerelementen

Die folgende Liste enthält alle Steuerelemente, die Sie in 3D-Karten in Maps JavaScript verwenden können:

  • Die Zoomsteuerung besteht aus den Buttons „+“ und „-“, mit denen die Zoomstufe der Karte geändert werden kann.
  • Die Steuerung zum Verschieben besteht aus den Schaltflächen „←“, „→“, „↑“ und „↓“, mit denen der Mittelpunkt der Karte geändert werden kann.
  • Mit den Steuerelementen zum Drehen können Sie die Ausrichtung der Kamera ändern.
  • Mit der Neigungssteuerung können Sie die Neigung der Kamera ändern.
  • Das Kompass-Steuerelement zeigt die Richtung des Kompassnordens an und ermöglicht es, die Kamera auf eine nördliche Ausrichtung zurückzusetzen.
  • Mit dem Steuerelement für den Kartenmodus können Sie zwischen dem ROADMAP-Modus und dem fotorealistischen Modus (HYBRID oder SATELLITE) wechseln.

Im folgenden Codebeispiel wird gezeigt, wie Sie die Steuerelemente für die Erkundung ein- und ausschalten:

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIHidden: 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>

Nächste Schritte