Controlli ed esplorazione delle mappe 3D

Seleziona la piattaforma: Android iOS JavaScript

Panoramica dei controlli

Le mappe visualizzate tramite le mappe 3D nell'API Maps JavaScript contengono elementi UI, 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 ai controlli personalizzati. Tieni presente che le scorciatoie da tastiera per l'esplorazione della mappa sono disponibili quando i controlli UI sono disattivati.

Le mappe 3D nell'API Maps JavaScript supportano anche la guida degli utenti nella mappa utilizzando percorsi della videocamera preimpostati. Questi percorsi possono essere personalizzati e combinati per creare esperienze 3D complete.

Controlli di esplorazione

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

Immagine della mappa con i controlli presenti

Di seguito è riportato un elenco dell'insieme completo di controlli nelle mappe 3D in Maps JavaScript:

  • Il controllo 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 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