Potresti voler controllare la panoramica della videocamera, l'altitudine massima o creare limiti di latitudine e longitudine che limitano il movimento di un utente in una determinata mappa. Puoi farlo utilizzando le limitazioni della videocamera.
L'esempio seguente mostra una mappa con limiti di posizione impostati per limitare il movimento della videocamera:
Limitare i limiti della mappa
Puoi limitare i limiti geografici della videocamera impostando l'opzione bounds.
Il seguente esempio di codice mostra come limitare i limiti della mappa:
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();
}
Limitare la videocamera
Puoi limitare il movimento della videocamera impostando una delle seguenti opzioni:
maxAltitudeminAltitudemaxHeadingminHeadingmaxTiltminTilt
Il seguente esempio di codice mostra come limitare la videocamera:
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();
Limitare i limiti della mappa e della videocamera
Puoi limitare contemporaneamente i limiti della mappa e della videocamera. Il seguente esempio di codice mostra come limitare i limiti della mappa e della videocamera:
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();
Percorsi preimpostati della videocamera
3D Maps in Maps JavaScript fornisce due percorsi preimpostati della videocamera. I percorsi della videocamera possono essere personalizzati modificando la durata dell'animazione (aumentando o diminuendo la velocità) o combinandoli per creare esperienze più cinematografiche.
Inoltre, puoi controllare l'altezza della videocamera specificando altitudeMode.
3D Maps in Maps JavaScript supporta i seguenti percorsi della videocamera:
- L'animazione
flyCameraTovola dal centro della mappa a una destinazione specificata. - L'animazione
flyCameraAroundruota attorno a un punto sulla mappa il numero di giri specificato.
I due percorsi disponibili possono essere combinati per volare verso un punto d'interesse, ruotare attorno a esso e poi fermarsi quando specificato.
Vai su
Il seguente esempio di codice mostra come animare la videocamera per volare verso una posizione:
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
});
}
Vola intorno
Il seguente esempio di codice mostra come animare la videocamera per volare attorno a una posizione:
const map = document.querySelector('gmp-map-3d');
async function init() {
await google.maps.importLibrary('maps3d');
map.flyCameraAround({
camera,
durationMillis: 60000,
repeatCount: 1
});
}
Combinare le animazioni
Il seguente esempio di codice mostra come combinare le animazioni per far volare la videocamera verso una posizione e poi ruotare attorno alla posizione al termine della prima animazione:
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});
}
Controllare la gestione dei gesti
Quando un utente scorre una pagina contenente una mappa, l'azione di scorrimento può causare inavvertitamente lo zoom della mappa. Puoi controllare questo comportamento impostando l'opzione della mappa gestureHandling.
gestureHandling: cooperative
La gestione dei gesti "cooperativa" consente all'utente di scorrere la pagina senza influire sullo zoom o sulla panoramica della mappa. Per eseguire lo zoom, gli utenti possono utilizzare i controlli, i gesti con due dita (per i dispositivi touchscreen) o tenendo premuto CMD/CTRL durante lo scorrimento.
Il seguente codice mostra come impostare la gestione dei gesti su "cooperativa":
new Map3DElement({
center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
tilt: 70,
heading: 50,
range: 4000,
gestureHandling: 'COOPERATIVE',
});
gestureHandling: greedy
La gestione dei gesti "greedy" reagisce a tutti gli eventi di scorrimento e ai gesti touch.
gestureHandling: auto
La gestione dei gesti "auto" modifica il comportamento della mappa a seconda che la mappa sia contenuta o
meno in un <iframe>, e se la pagina sia scorrevole.
- Se la mappa si trova all'interno di un
<iframe>, la gestione dei gesti sarà "cooperativa". - Se la mappa non si trova all'interno di un
<iframe>, la gestione dei gesti sarà "greedy".