Es posible que desees controlar el movimiento lateral 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 restricciones de la cámara.
En el siguiente ejemplo, se muestra un mapa con límites de ubicación establecidos para limitar el movimiento de la cámara:
Restringe los límites del mapa
Puedes restringir los límites geográficos de la cámara si estableces 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 si estableces 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();
Restringe los límites del mapa y la cámara
Puedes restringir los límites del mapa y la cámara de forma simultánea. En el siguiente código de muestra, se muestra cómo restringir los límites del mapa y 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();
Establece rutas predeterminadas de la cámara
3D Maps en Maps JavaScript proporciona dos rutas predeterminadas de la cámara. Las rutas de la 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.
Además, puedes controlar la altura de la cámara si especificas altitudeMode.
3D Maps en Maps JavaScript admite las siguientes rutas de la cámara:
- La animación
flyCameraTovuela desde el centro del mapa hasta un destino especificado. - La animación
flyCameraAroundrota alrededor de un punto del mapa la cantidad de revoluciones especificada.
Las dos rutas disponibles se pueden combinar para volar a un lugar de interés, rotar alrededor de él 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, altitude: 500 },
altitudeMode: 'RELATIVE_TO_GROUND',
tilt: 67.5,
range: 1000
},
durationMillis: 5000
});
}
Volar alrededor
En la siguiente muestra de código, se muestra cómo animar la cámara para que vuegue 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
});
}
Combina 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-animationend', () => {
map.flyCameraAround({
camera: flyToCamera,
durationMillis: 60000,
repeatCount: 1
});
}, {once: true});
}
Controla el controlador de gestos
Cuando un usuario se desplaza por una página que contiene un mapa, puede hacer zoom en este de manera no intencional. Puedes controlar este comportamiento si estableces la opción de mapa gestureHandling.
gestureHandling: cooperative
El controlador de gestos "cooperative" permite que el usuario se desplace por la página sin afectar el zoom ni el movimiento lateral del mapa. Para aplicar zoom, los usuarios pueden usar los controles, los gestos de dos dedos (para dispositivos con pantalla táctil) o mantener presionado CMD/CTRL mientras se desplazan.
En el siguiente código, se muestra cómo establecer el controlador de gestos en "cooperative":
new Map3DElement({
center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
tilt: 70,
heading: 50,
range: 4000,
gestureHandling: 'COOPERATIVE',
});
gestureHandling: greedy
El controlador de gestos "greedy" reacciona a todos los eventos de desplazamiento y gestos táctiles.
gestureHandling: auto
El manejo de gestos "auto" cambia el comportamiento del mapa según si el mapa está contenido en un <iframe> y si la página se puede desplazar.
- Si el mapa está dentro de un
<iframe>, el controlador de gestos será "cooperative". - Si el mapa no está dentro de un
<iframe>, el controlador de gestos será "greedy".