Controlli ed esplorazione delle mappe 3D

Seleziona la piattaforma: Android iOS JavaScript

Panoramica dei controlli

Le mappe visualizzate tramite 3D Maps nell'API Maps JavaScript 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 semplicità o per lasciare spazio a controlli personalizzati. Tieni presente che le scorciatoie da tastiera per l'esplorazione della mappa sono disponibili quando i controlli dell'interfaccia utente sono disattivati.

Le mappe 3D nell'API Maps JavaScript supportano 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 il set predefinito di controlli visualizzati dalle mappe 3D nell'API Maps JavaScript:

Immagine di una mappa con i controlli presenti

Di seguito è riportato un elenco completo dei controlli in 3D Maps in Maps JavaScript:

  • Il controllo dello 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 di rotazione ti consentono di modificare la direzione della videocamera.
  • Il controllo dell'inclinazione consente di modificare l'inclinazione della videocamera.
  • Il controllo della bussola indica la direzione del nord della bussola e consente di reimpostare la videocamera su una direzione settentrionale.

Il seguente esempio di codice mostra l'attivazione/disattivazione dei 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