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 fotorrealistas en 3D de la API de Maps JavaScript contienen elementos de la IU para admitir la interacción del usuario con el mapa. Estos elementos se conocen como controles, y puedes optar por incluirlos en la IU o no. Si suprimes los controles de la IU, el usuario podrá seguir navegando por el mapa con combinaciones de teclas.

La API de Maps JavaScript con 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 muestran los mapas fotorrealistas en 3D en 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 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 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,
  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. Las rutas de cámara se pueden personalizar cambiando la duración de la animación (lo que aumenta o disminuye la velocidad) o combinándolas 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 de flyCameraTo vuela desde el centro del mapa hasta un destino especificado.
  • La animación de flyCameraAround gira alrededor de un punto del mapa la cantidad de veces especificada.

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

Visualizar

En el siguiente ejemplo de código, se muestra cómo animar la cámara para que se desplace 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
  });
}

Vuela alrededor

En el siguiente ejemplo 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 el siguiente ejemplo de código, se muestra cómo combinar animaciones para llevar la cámara a una ubicación y, luego, rotar alrededor de ella 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