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 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 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 verso nord.
  • Il controllo della modalità mappa ti consente di passare dalla modalità ROADMAP alla modalità fotorealistica (HYBRID o SATELLITE).

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