Controles e exploração do mapa 3D

Visão geral dos controles

Os mapas mostrados pelos mapas 3D fotorrealistas na API Maps JavaScript contêm elementos da interface para oferecer suporte à interação do usuário com o mapa. Esses elementos são conhecidos como controles, e você pode optar por incluí-los ou não na interface. Se você suprimir os controles da interface, o usuário ainda poderá navegar pelo mapa usando atalhos de teclado.

Os mapas 3D fotorrealistas na API Maps JavaScript também ajudam a guiar os usuários pelo mapa usando caminhos de câmera predefinidos. Esses caminhos podem ser personalizados e combinados para criar experiências 3D avançadas.

Controles de análise

A imagem a seguir mostra o conjunto padrão de controles exibidos pelos mapas 3D fotorrealistas na API Maps JavaScript:

Confira abaixo a lista completa de controles nos mapas 3D fotorrealistas em JavaScript do Maps:

• O controle de zoom mostra os botões "+" e "-" para mudar o nível de zoom do mapa.
• Com o controle de inclinação, é possível mudar a inclinação da câmera.
• Com o controle de rotação, é possível mudar a direção da câmera.
• O controle de movimento mostra os botões "←", "→", "↑" e "↓" para mudar o centro do mapa.

O exemplo de código a seguir demonstra como alternar os controles de análise detalhada:

Caminhos predefinidos da câmera

Os mapas 3D fotorrealistas em JavaScript do Maps oferecem dois trajetos 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.

Os mapas 3D fotorrealistas 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 vezes.

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 },
      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,
    rounds: 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-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

Próximas etapas

• Saiba como restringir o mapa e a câmera.
• Saiba como ouvir e processar a interação do usuário.