Cómo animar rutas de cámara

Selecciona la plataforma: Android iOS JavaScript

Puedes agregar animaciones de rutas de cámara a tu mapa en 3D para brindar una experiencia más envolvente a tus usuarios. Las animaciones de la ruta de la cámara pueden volar hacia un punto del mapa o alrededor de él.

En el siguiente ejemplo, se combinan las animaciones flyCameraTo y flyCameraAround:

Rutas de cámara predeterminadas

3D Maps en Maps JavaScript proporciona dos rutas de cámara predeterminadas. Las rutas de cámara se pueden personalizar cambiando la duración de la animación (lo que aumenta o disminuye la velocidad) o combinándolas para crear experiencias más cinematográficas. Además, puedes controlar la altura de la cámara especificando altitudeMode.

Los mapas en 3D de Maps JavaScript admiten las siguientes rutas de cámara:

• La animación de flyCameraTo vuela desde el centro del mapa hasta un destino especificado.
• La animación de flyCameraAround gira alrededor de un punto del mapa la cantidad de revoluciones especificada.

Las dos rutas disponibles se pueden combinar para volar a un lugar de interés, rotar alrededor de él y, luego, detenerse cuando se especifique.

Visualizar

En la siguiente muestra de código, se muestra cómo animar la cámara para que se desplace a una ubicación:

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
  });
}

Vuela alrededor

En la siguiente muestra de código, se muestra cómo animar la cámara para que vuele alrededor de una ubicación:

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

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

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

Cómo combinar animaciones

En el siguiente ejemplo de código, se muestra cómo combinar animaciones para llevar la cámara a una ubicación y, luego, rotar alrededor de ella cuando finaliza la primera animación:

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});
}