Exploración y controles de mapas en 3D

Selecciona la plataforma: Android iOS JavaScript

Descripción general de los controles

Los mapas que se muestran a través de los mapas en 3D de la API de Maps JavaScript contienen elementos de la IU, conocidos como controles de exploración, para admitir la interacción del usuario con el mapa. Los controles de exploración se muestran en la IU del mapa de forma predeterminada, pero se pueden inhabilitar para simplificar o dejar espacio para los controles personalizados. Ten en cuenta que las combinaciones de teclas para explorar el mapa están disponibles cuando los controles de la IU están inhabilitados.

Los mapas en 3D de la API de Maps JavaScript también admiten guiar a los usuarios por el mapa con rutas de cámara predeterminadas. Estos caminos se pueden personalizar y combinar para crear experiencias 3D enriquecidas.

Controles de exploración

En la siguiente imagen, se muestra el conjunto predeterminado de controles que muestran los mapas en 3D de la API de Maps JavaScript:

Imagen del mapa con los controles presentes

A continuación, se muestra una lista de todos los conjuntos de controles en 3D Maps en Maps JavaScript:

  • El control de zoom muestra los botones "+" y "-" para cambiar el nivel de zoom del mapa.
  • El control de movimiento muestra los botones "←", "→", "↑" y "↓" para cambiar el centro del mapa.
  • Los controles de rotación te permiten cambiar el rumbo de la cámara.
  • El control de inclinación te permite cambiar la inclinación de la cámara.
  • El control de brújula indica la dirección del norte de la brújula y permite restablecer la cámara a un rumbo norte.

En la siguiente muestra de código, se muestra cómo alternar los controles de exploración:

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óximos pasos