Exploración y controles de mapas en 3D

Descripción general de los controles

Los mapas que se muestran a través de la API de Maps JavaScript con mapas fotorrealistas en 3D contienen elementos de la IU para admitir la interacción del usuario con el mapa. Estos elementos se conocen como controles, y puedes incluirlos en la IU o no. Si suprimes los controles de la IU, el usuario aún puede navegar por el mapa con combinaciones de teclas.

La API de Maps JavaScript de los mapas fotorrealistas en 3D también admite guiar a los usuarios por el mapa con rutas de cámara predeterminadas. Estas rutas 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 muestra la API de Maps JavaScript en los mapas 3D fotorrealistas:

Imagen de un mapa con controles presentes

A continuación, se muestra una lista del conjunto completo de controles de los mapas fotorrealistas en 3D de Maps JavaScript:

  • El control de zoom muestra los botones "+" y "-" para cambiar el nivel de zoom del mapa.
  • El control de inclinación te permite cambiar la inclinación de la cámara.
  • El control de rotación te permite cambiar el rumbo de la cámara.
  • El control de movimiento muestra los botones "←", "→", "↑" y "↓" para cambiar el centro del mapa.

En la siguiente muestra de código, se muestra cómo activar y 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,
  defaultUIDisabled: 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>

Rutas de cámara predeterminadas

Los mapas fotorrealistas en 3D de Maps JavaScript proporcionan dos rutas de cámara predeterminadas. Para personalizar las rutas de la cámara, cambia la duración de la animación (lo que aumenta o disminuye la velocidad) o combínalas para crear experiencias más cinematográficas.

Los mapas fotorrealistas en 3D de Maps JavaScript admiten las siguientes rutas de cámara:

  • La animación flyCameraTo vuela desde el centro del mapa hasta un destino especificado.
  • La animación flyCameraAround gira alrededor de un punto en el mapa la cantidad de rondas especificada.

Las dos rutas disponibles se pueden combinar para volar a un punto de interés, girar a su alrededor y, luego, detenerse cuando se especifique.

Visualizar

En la siguiente muestra de código, se muestra cómo animar la cámara para que vuele a una ubicación:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Desplazarse

En la siguiente muestra de código, se muestra cómo animar la cámara para que vuele alrededor de una ubicación:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    rounds: 1
  });
}

Cómo combinar animaciones

En la siguiente muestra de código, se muestra cómo combinar animaciones para volar la cámara a una ubicación y, luego, rotar alrededor de la ubicación cuando finaliza la primera animación:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animation-end', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      rounds: 1
    });
  }, {once: true});
}

Próximos pasos