Animare i percorsi della videocamera

Seleziona la piattaforma: Android iOS JavaScript

Puoi aggiungere animazioni dei percorsi della videocamera alla tua mappa 3D per offrire un'esperienza più coinvolgente ai tuoi utenti. Le animazioni dei percorsi della videocamera possono spostarsi in volo verso o intorno a un punto sulla mappa.

Il seguente esempio combina le animazioni flyCameraTo e flyCameraAround:

Percorsi della videocamera preimpostati

3D Maps in Maps JavaScript fornisce 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. Inoltre, puoi controllare l'altezza della videocamera specificando altitudeMode.

3D Maps in Maps JavaScript supporta i seguenti percorsi della videocamera:

• L'animazione flyCameraTo si sposta in volo dal centro della mappa a una destinazione specificata.
• L'animazione flyCameraAround ruota intorno a un punto sulla mappa per il numero di rotazioni specificato.

I due percorsi disponibili possono essere combinati per spostarsi in volo verso un punto d'interesse, ruotare intorno a esso e poi fermarsi quando specificato.

Vai su

Il seguente esempio di codice mostra come animare la videocamera per spostarsi in volo verso 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, altitude: 500 },
      altitudeMode: 'RELATIVE_TO_GROUND',
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Spostati intorno

Il seguente esempio di codice mostra come animare la videocamera per spostarsi in volo intorno a una posizione:

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

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

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

Combina animazioni

Il seguente esempio di codice mostra come combinare le animazioni per spostare la videocamera in volo verso 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-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}