Controles e exploração do mapa 3D

Selecione a plataforma: Android iOS JavaScript

Visão geral dos controles

Os mapas 3D na API Maps JavaScript contêm elementos da interface, conhecidos como controles de exploração, para oferecer suporte à interação do usuário com o mapa. Os controles de análise detalhada são mostrados na interface do mapa por padrão, mas podem ser desativados para simplificar ou deixar espaço para controles personalizados. Os atalhos de teclado para exploração de mapas estão disponíveis quando os controles da interface são desativados.

Os mapas 3D na API Maps JavaScript também ajudam os usuários a navegar 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 na API Maps JavaScript:

Imagem de um mapa com controles

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

  • O controle de 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.
  • Com os controles de rotação, você pode mudar a direção da câmera.
  • Com o controle de inclinação, é possível mudar a inclinação da câmera.
  • O controle da bússola indica a direção do norte da bússola e permite redefinir a câmera para uma direção norte.

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