Controlli ed esplorazione delle mappe 3D

Seleziona la piattaforma: Android iOS JavaScript

Panoramica dei controlli

Le mappe visualizzate tramite l'API Maps JavaScript di 3D Maps contengono elementi dell'interfaccia utente, noti come controlli di esplorazione, per supportare l'interazione dell'utente con la mappa. I controlli di esplorazione vengono visualizzati nell'interfaccia utente della mappa per impostazione predefinita, ma possono essere disattivati per semplificare o lasciare spazio ai controlli personalizzati. Tieni presente che le scorciatoie da tastiera per l'esplorazione della mappa sono disponibili quando i controlli dell'interfaccia utente sono disattivati.

L'API Maps JavaScript di 3D Maps supporta anche la guida degli utenti sulla mappa utilizzando percorsi della videocamera preimpostati. Questi percorsi possono essere personalizzati e combinati per creare esperienze 3D avanzate.

Controlli di esplorazione

L'immagine seguente mostra l'insieme predefinito di controlli visualizzati dall'API Maps JavaScript di 3D Maps:

Immagine di una mappa con i controlli

Di seguito è riportato un elenco completo dei controlli di 3D Maps nell'API Maps JavaScript:

  • Il controllo Zoom mostra i pulsanti "+" e "-" per modificare il livello di zoom della mappa.
  • Il controllo Sposta mostra i pulsanti "←", "→", "↑" e "↓" per modificare il centro della mappa.
  • I controlli Ruota consentono di modificare l'orientamento della videocamera.
  • Il controllo Inclinazione consente di modificare l'inclinazione della videocamera.
  • Il controllo Bussola indica la direzione del nord della bussola e consente di reimpostare l'orientamento della videocamera verso nord.

Il seguente esempio di codice mostra come attivare/disattivare i controlli di esplorazione:

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>

Passaggi successivi