Controles e exploração do mapa 3D

Selecione a plataforma: Android iOS JavaScript

Visão geral dos controles

Os mapas mostrados pelos mapas 3D na API Maps JavaScript contêm elementos da interface, conhecidos como controles de navegação, para permitir a interação do usuário com o mapa. Os controles de exploração são exibidos na interface do mapa por padrão, mas podem ser desativados para simplificar ou deixar espaço para controles personalizados. Observação: os atalhos do teclado para Visualização no mapa estão disponíveis quando os controles de interface estão desativados.

A API Maps JavaScript também permite guiar os usuários pelo mapa 3D usando caminhos de câmera predefinidos. Esses caminhos podem ser personalizados e combinados para criar experiências 3D ricas.

Controles de análise detalhada

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

Imagem do mapa com controles presentes

Confira abaixo uma lista de todos os controles dos mapas 3D na API Maps JavaScript:

  • Zoom: mostra os botões "+" e "-" para mudar o nível de zoom do mapa.
  • O controle de movimento mostra os botões "←", "→", "↑" e "↓" para mudar o centro do mapa.
  • Os controles de rotação permitem mudar a direção da câmera.
  • O controle de inclinação permite mudar a inclinação da câmera.
  • O controle de bússola indica a direção do norte e permite redefinir a câmera para uma direção norte.

O exemplo de código a seguir demonstra como alternar os controles de exploração:

JavaScript

const map = new Map3DElement({
  center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
  tilt: 75,
  heading: 330,
  mode: MapMode.SATELLITE,
  defaultUIHidden: 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>

Próximas etapas