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 la exploración del 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 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 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 de los mapas en 3D de 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 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 la siguiente muestra 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