Animar trajetos da câmera

Selecione a plataforma: Android iOS JavaScript

Você pode adicionar animações de trajetos da câmera ao seu mapa 3D para oferecer uma experiência mais imersiva aos usuários. As animações de trajetória da câmera podem voar até um ponto no mapa ou ao redor dele.

O exemplo a seguir combina as animações flyCameraTo e flyCameraAround:

Caminhos de câmera predefinidos

Os mapas 3D no JavaScript do Maps oferecem dois caminhos de câmera predefinidos. Os trajetos da câmera podem ser personalizados mudando a duração da animação (aumentando ou diminuindo a velocidade) ou combinando-os para criar experiências mais cinematográficas. Além disso, é possível controlar a altura da câmera especificando o altitudeMode.

Os mapas 3D no JavaScript do Maps são compatíveis com os seguintes caminhos de câmera:

• A animação flyCameraTo voa do centro do mapa para um destino especificado.
• A animação flyCameraAround gira em torno de um ponto no mapa o número especificado de revoluções.

Os dois caminhos disponíveis podem ser combinados para voar até um ponto de interesse, girar em torno dele e parar quando especificado.

Voar para

O exemplo de código a seguir demonstra como animar a câmera para voar até um local:

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

Voar por aí

O exemplo de código a seguir demonstra como animar a câmera para voar ao redor de um local:

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

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

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

Combinar animações

O exemplo de código a seguir demonstra a combinação de animações para mover a câmera até um local e girar ao redor dele quando a primeira animação termina:

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