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 Interaktion der Nutzer mit der Karte ermöglichen. Die Steuerelemente für die Erkundung werden standardmäßig in der Karten-UI angezeigt, können aber deaktiviert werden, um die Benutzeroberfläche zu vereinfachen oder Platz für benutzerdefinierte Steuerelemente zu schaffen. Wenn die UI-Steuerelemente deaktiviert sind, können Sie Tastenkombinationen verwenden, um die Karte zu erkunden.

Die 3D-Karten in der Maps JavaScript API unterstützen auch die Führung Ihrer Nutzer auf der Karte mithilfe voreingestellter Kamerapfade. 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 3D-Karten in der Maps JavaScript API angezeigt werden:

Bild einer Karte mit Steuerelementen

Die folgende Liste enthält alle Steuerelemente in 3D Maps in Maps JavaScript:

  • Die Zoomsteuerung besteht aus den Buttons „+“ und „-“, mit denen die Zoomstufe der Karte geändert werden kann.
  • Die Verschiebesteuerung besteht aus den Schaltflächen „←“, „→“, „↑“ und „↓“, mit denen der Mittelpunkt der Karte geändert werden kann.
  • Mit den Drehungssteuerungen können Sie die Ausrichtung der Kamera ändern.
  • Mit der Neigungssteuerung können Sie die Neigung der Kamera ändern.
  • Die Kompasssteuerung gibt die Richtung des Kompassnordens an und ermöglicht das Zurücksetzen der Kamera auf eine nördliche Ausrichtung.

Im folgenden Codebeispiel wird gezeigt, wie die Steuerelemente für die explorative Datenanalyse 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,
  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