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 la API de Maps JavaScript en 3D 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 la exploración del mapa están disponibles cuando los controles de la IU están inhabilitados.

La API de Maps JavaScript en 3D también admite guiar a los usuarios por el mapa con rutas de cámara preestablecidas. Estas rutas se pueden personalizar y combinar para crear experiencias enriquecidas en 3D.

Controles de exploración

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

Imagen del mapa con los controles presentes

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

  • 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 la orientación 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 una orientación hacia el norte.

En el siguiente ejemplo de código, se muestra cómo activar o desactivar 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