Controlli ed esplorazione delle mappe 3D

Panoramica dei controlli

Le mappe visualizzate tramite le mappe 3D fotorealistiche nell'API Maps JavaScript contengono elementi dell'interfaccia utente per supportare l'interazione dell'utente con la mappa. Questi elementi sono noti come controlli e puoi scegliere di includerli o meno nell'interfaccia utente. Se disattivi i controlli dell'interfaccia utente, l'utente può comunque navigare nella mappa utilizzando le scorciatoie da tastiera.

Le mappe 3D fotorealistiche 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 fotorealistiche nell'API Maps JavaScript:

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

• Il controllo dello zoom mostra i pulsanti "+" e "-" per modificare il livello di zoom della mappa.
• Il controllo dell'inclinazione ti consente di modificare l'inclinazione della videocamera.
• Il controllo di rotazione ti consente di modificare l'orientamento della videocamera.
• Il controllo Sposta mostra i pulsanti "←", "→", "↑" e "↓" per modificare il centro della mappa.

Il seguente esempio di codice mostra l'attivazione/disattivazione dei controlli di esplorazione:

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIDisabled: true,
});

<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>

Percorsi preimpostati della videocamera

Le mappe 3D fotorealistiche in Maps JavaScript forniscono due percorsi della videocamera preimpostati. I percorsi della videocamera possono essere personalizzati modificando la durata dell'animazione (aumentando o diminuendo la velocità) o combinandoli per creare esperienze più cinematografiche.

Le mappe 3D fotorealistiche in Maps JavaScript supportano i seguenti percorsi della videocamera:

• L'animazione flyCameraTo vola dal centro della mappa a una destinazione specificata.
• L'animazione flyCameraAround ruota attorno a un punto della mappa per il numero di giri specificato.

I due percorsi disponibili possono essere combinati per volare verso un punto di interesse, ruotare intorno a esso e poi fermarsi quando specificato.

Vai su

Il seguente esempio di codice mostra come animare la videocamera per raggiungere una posizione:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Volare in giro

Il seguente esempio di codice mostra come animare la videocamera per farla volare intorno a una posizione:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    rounds: 1
  });
}

Combinare le animazioni

Il seguente esempio di codice mostra come combinare le animazioni per spostare la videocamera in una posizione e poi ruotare intorno alla posizione al termine della prima animazione:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

Passaggi successivi

• Scopri come limitare la mappa e la videocamera.
• Scopri come ascoltare e gestire l'interazione degli utenti.