Vous pouvez contrôler le panoramique et l'altitude maximale de la caméra, ou créer des limites de latitude et de longitude pour restreindre les déplacements d'un utilisateur sur une carte donnée. Pour ce faire, vous pouvez utiliser les restrictions de l'appareil photo.
L'exemple suivant montre une carte avec des limites de localisation définies pour limiter le mouvement de la caméra :
Restreindre les limites de la carte
Vous pouvez limiter les limites géographiques de la caméra en définissant l'option bounds.
L'exemple de code suivant montre comment limiter les limites de la carte :
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();
}
Restreindre l'accès à la caméra
Vous pouvez limiter les mouvements de la caméra en définissant l'une des options suivantes :
maxAltitudeminAltitudemaxHeadingminHeadingmaxTiltminTilt
L'exemple de code suivant montre comment restreindre la caméra :
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();
Restreindre les limites de la carte et de la caméra
Vous pouvez limiter simultanément les limites de la carte et de la caméra. L'exemple de code suivant montre comment limiter les limites de la carte et de la caméra :
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();
Itinéraires de caméras prédéfinis
3D Maps dans Maps JavaScript fournit deux chemins de caméra prédéfinis. Les chemins de caméra peuvent être personnalisés en modifiant la durée de l'animation (ce qui augmente ou diminue la vitesse) ou en les combinant pour créer des expériences plus cinématographiques.
Les cartes 3D dans Maps JavaScript sont compatibles avec les chemins de caméra suivants :
- L'animation
flyCameraTose déplace du centre de la carte vers une destination spécifiée. - L'animation
flyCameraAroundeffectue le nombre de rotations spécifié autour d'un point de la carte.
Les deux chemins disponibles peuvent être combinés pour voler vers un point d'intérêt, tourner autour de celui-ci, puis s'arrêter à l'endroit spécifié.
Aller à
L'exemple de code suivant montre comment animer la caméra pour qu'elle se déplace vers un lieu :
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
});
}
Voler autour
L'exemple de code suivant montre comment animer la caméra pour qu'elle survole un lieu :
const map = document.querySelector('gmp-map-3d');
async function init() {
await google.maps.importLibrary('maps3d');
map.flyCameraAround({
camera,
durationMillis: 60000,
repeatCount: 1
});
}
Combiner des animations
L'exemple de code suivant montre comment combiner des animations pour faire voler la caméra vers un emplacement, puis la faire pivoter autour de cet emplacement lorsque la première animation se termine :
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});
}
Contrôler la gestion des gestes
Lorsqu'un utilisateur fait défiler une page contenant une carte, il peut la zoomer par inadvertance. Vous pouvez contrôler ce comportement en définissant l'option de carte gestureHandling.
gestureHandling : cooperative
La gestion des gestes "coopérative" permet à l'utilisateur de faire défiler la page sans affecter le zoom ni le panoramique de la carte. Pour faire un zoom, les utilisateurs peuvent utiliser les commandes, les gestes à deux doigts (pour les appareils à écran tactile) ou en maintenant la touche CMD/CTRL enfoncée tout en faisant défiler l'écran.
Le code suivant montre comment définir la gestion des gestes sur "coopérative" :
new Map3DElement({
center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
tilt: 70,
heading: 50,
range: 4000,
gestureHandling: 'COOPERATIVE',
});
gestureHandling : greedy
La gestion des gestes "greedy" réagit à tous les événements de défilement et gestes tactiles.
gestureHandling : auto
La gestion des gestes "Auto" modifie le comportement de la carte selon qu'elle est contenue ou non dans un <iframe>, et selon que la page est défilable ou non.
- Si la carte se trouve dans un
<iframe>, la gestion des gestes sera "coopérative". - Si la carte ne se trouve pas dans un
<iframe>, la gestion des gestes sera "greedy".