Controles e exploração do mapa 3D

Selecione a plataforma: Android iOS JavaScript

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:

Imagem de um mapa com controles

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:

JavaScript

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

HTML

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

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