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. Hinweis: Tastenkombinationen für die Kartennavigation sind verfügbar, wenn die UI-Steuerelemente deaktiviert sind.

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: Karte mit Steuerelementen

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

  • Die Zoomsteuerung besteht aus den Schaltflächen „+“ und „-“, mit denen die Zoomstufe der Karte geändert werden kann.
  • Das Steuerelement zum Verschieben 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.
  • Mit der Kompasssteuerung wird die Richtung des Kompassnordens angezeigt. Außerdem kann die Kamera auf eine nördliche Ausrichtung zurückgesetzt werden.

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,
  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