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 della mappa con i controlli

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 di spostamento mostra i pulsanti "←", "→", "↑" e "↓" per modificare il centro della mappa.
  • I controlli di rotazione ti consentono di modificare l'orientamento della videocamera.
  • Il controllo dell'inclinazione ti 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 un orientamento nord.

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