Steuerelemente und explorative Datenanalyse in 3D-Karten

Plattform auswählen: Android iOS JavaScript

Übersicht der Steuerelemente

Die Karten, die über die 3D Maps 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. Sie können jedoch deaktiviert werden, um die Übersichtlichkeit zu verbessern 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-Inhalte zu erstellen.

Steuerelemente für explorative Datenanalysen

Auf der folgenden Karte 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 Buttons „←“, „→“, „↑“ 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.

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