Es posible que desees controlar el desplazamiento horizontal de la cámara, la altitud máxima o crear límites de latitud y longitud que restrinjan el movimiento de un usuario en un mapa determinado. Puedes hacerlo con las restricciones de la cámara.
En el siguiente ejemplo, se muestra un mapa con límites de ubicación establecidos para restringir el movimiento de la cámara:
Cómo restringir los límites del mapa
Puedes restringir los límites geográficos de la cámara configurando la opción bounds.
En la siguiente muestra de código, se muestra cómo restringir los límites del mapa:
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map = new Map3DElement({
center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
tilt: 67.5,
mode: MapMode.HYBRID,
bounds: {south: 37, west: -123, north: 38, east: -121}
});
init();
}
Restringe la cámara
Puedes restringir el movimiento de la cámara configurando cualquiera de las siguientes opciones:
maxAltitudeminAltitudemaxHeadingminHeadingmaxTiltminTilt
En el siguiente ejemplo de código, se muestra cómo restringir la cámara:
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map = new Map3DElement({
center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
tilt: 67.5,
mode: MapMode.HYBRID,
minAltitude: 1,
maxAltitude: 1000,
minTilt: 35,
maxTilt: 55
});
document.body.append(map);
}
init();
Cómo restringir los límites del mapa y la cámara
Puedes restringir simultáneamente los límites del mapa y de la cámara. En el siguiente ejemplo de código, se muestra cómo restringir los límites del mapa y de la cámara:
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map = new Map3DElement({
center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
tilt: 67.5,
mode: MapMode.HYBRID,
minAltitude: 1,
maxAltitude: 1000,
minTilt: 35,
maxTilt: 55,
bounds: {south: 37, west: -123, north: 38, east: -121}
});
document.body.append(map);
}
init();
Rutas de cámara predeterminadas
3D Maps en Maps JavaScript proporciona dos rutas de cámara predeterminadas. Puedes personalizar los recorridos de la cámara cambiando la duración de la animación (lo que aumenta o disminuye la velocidad) o combinándolos para crear experiencias más cinematográficas.
Los mapas en 3D de Maps JavaScript admiten las siguientes rutas de cámara:
- La animación de
flyCameraTovuela desde el centro del mapa hasta un destino especificado. - La animación
flyCameraAroundgira alrededor de un punto del mapa la cantidad de revoluciones 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,
repeatCount: 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-animationend', () => {
map.flyCameraAround({
camera: flyToCamera,
durationMillis: 60000,
repeatCount: 1
});
}, {once: true});
}
Cómo controlar el procesamiento de gestos
Cuando un usuario se desplaza por una página que contiene un mapa, puede hacer zoom en este de manera inadvertida. Puedes controlar este comportamiento configurando la opción de mapa gestureHandling.
gestureHandling: cooperative
El control de gestos "cooperativo" permite que el usuario se desplace por la página sin afectar el zoom ni el desplazamiento lateral del mapa. Para acercar o alejar la imagen, los usuarios pueden usar los controles, los gestos con dos dedos (para dispositivos con pantalla táctil) o mantener presionada la tecla CMD/CTRL mientras se desplazan.
En el siguiente código, se muestra cómo configurar el control de gestos como "cooperativo":
new Map3DElement({
center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
tilt: 70,
heading: 50,
range: 4000,
gestureHandling: 'COOPERATIVE',
});
gestureHandling: greedy
El control de gestos "greedy" reacciona a todos los eventos de desplazamiento y gestos táctiles.
gestureHandling: auto
El control de gestos "Automático" cambia el comportamiento del mapa según si este se encuentra o no dentro de un <iframe> y si la página se puede desplazar.
- Si el mapa se encuentra dentro de un
<iframe>, el control de gestos será "cooperativo". - Si el mapa no está dentro de un
<iframe>, el control de gestos será "voraz".