Vous pouvez ajouter des animations de chemins de caméras à votre carte 3D pour offrir une expérience plus immersive à vos utilisateurs. Les animations de chemin de caméra peuvent voler vers un point sur la carte ou autour de celui-ci.
L'exemple suivant combine les animations flyCameraTo et flyCameraAround :
Afficher l'exemple de code source complet
TypeScript
async function init() { const { Map3DElement } = await google.maps.importLibrary('maps3d'); const map = new Map3DElement({ center: { lat: 37.79810773998413, lng: -122.41784275049939, altitude: 89.08476932205978, }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, gestureHandling: 'COOPERATIVE', }); map.mode = 'SATELLITE'; document.body.append(map); // Used for both the fly to function and the location to fly around. const flyToCamera = { center: { lat: 21.263523536467105, lng: -157.80663691939296, altitude: 80.28936069489404, }, range: 1500.8202963253427, tilt: 76.9173260789542, heading: -44.59196007522445, }; // Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively. map.flyCameraTo({ // Where we are going to. endCamera: flyToCamera, // How long we want the flight to take. durationMillis: 30000, }); // When the animation has completed, fly around the location. map.addEventListener( 'gmp-animationend', () => { map.flyCameraAround({ // Location to fly around. camera: flyToCamera, // Length of time to fly to the location. durationMillis: 50000, // Number of rotations to make in the specified time. repeatCount: 1, }); }, { once: true } ); // Stop animation after flying around. // At any time stop the animation. map.addEventListener('gmp-click', () => { map.stopCameraAnimation(); }); } void init();
JavaScript
async function init() { const { Map3DElement } = await google.maps.importLibrary('maps3d'); const map = new Map3DElement({ center: { lat: 37.79810773998413, lng: -122.41784275049939, altitude: 89.08476932205978, }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, gestureHandling: 'COOPERATIVE', }); map.mode = 'SATELLITE'; document.body.append(map); // Used for both the fly to function and the location to fly around. const flyToCamera = { center: { lat: 21.263523536467105, lng: -157.80663691939296, altitude: 80.28936069489404, }, range: 1500.8202963253427, tilt: 76.9173260789542, heading: -44.59196007522445, }; // Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively. map.flyCameraTo({ // Where we are going to. endCamera: flyToCamera, // How long we want the flight to take. durationMillis: 30000, }); // When the animation has completed, fly around the location. map.addEventListener( 'gmp-animationend', () => { map.flyCameraAround({ // Location to fly around. camera: flyToCamera, // Length of time to fly to the location. durationMillis: 50000, // Number of rotations to make in the specified time. repeatCount: 1, }); }, { once: true } ); // Stop animation after flying around. // At any time stop the animation. map.addEventListener('gmp-click', () => { map.stopCameraAnimation(); }); } void init();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ html, map { height: 100%; } body { height: 100%; margin: 0; padding: 0; }
HTML
<html>
<head>
<title>Map</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
<script>
// prettier-ignore
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>Essayer l'exemple
Itinéraires de caméras prédéfinis
3D Maps dans Maps JavaScript fournit deux chemins de caméra prédéfinis. Vous pouvez personnaliser les chemins de caméra en modifiant la durée de l'animation (pour augmenter ou diminuer la vitesse) ou en les combinant pour créer des expériences plus cinématographiques.
Vous pouvez également contrôler la hauteur de la caméra en spécifiant altitudeMode.
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 lorsque cela est spécifié.
Aller à
L'exemple de code suivant montre comment animer la caméra pour qu'elle se déplace vers un lieu :
map.flyCameraTo({ // Where we are going to. endCamera: flyToCamera, // How long we want the flight to take. durationMillis: 30000, });
Voler autour
L'exemple de code suivant montre comment animer la caméra pour qu'elle survole un lieu :
map.flyCameraAround({ // Location to fly around. camera: flyToCamera, // Length of time to fly to the location. durationMillis: 50000, // Number of rotations to make in the specified time. repeatCount: 1, });
Combiner des animations
L'exemple de code suivant montre comment combiner des animations pour faire voler la caméra jusqu'à un emplacement, puis la faire pivoter autour de cet emplacement lorsque la première animation se termine :
async function init() { const { Map3DElement } = await google.maps.importLibrary('maps3d'); const map = new Map3DElement({ center: { lat: 37.79810773998413, lng: -122.41784275049939, altitude: 89.08476932205978, }, range: 6062.016931506805, tilt: 81.17100663963272, heading: -56.047035719765596, gestureHandling: 'COOPERATIVE', }); map.mode = 'SATELLITE'; document.body.append(map); // Used for both the fly to function and the location to fly around. const flyToCamera = { center: { lat: 21.263523536467105, lng: -157.80663691939296, altitude: 80.28936069489404, }, range: 1500.8202963253427, tilt: 76.9173260789542, heading: -44.59196007522445, }; // Fly the camera from San Francisco to Hawaii, can be controlled by a button alternatively. map.flyCameraTo({ // Where we are going to. endCamera: flyToCamera, // How long we want the flight to take. durationMillis: 30000, }); // When the animation has completed, fly around the location. map.addEventListener( 'gmp-animationend', () => { map.flyCameraAround({ // Location to fly around. camera: flyToCamera, // Length of time to fly to the location. durationMillis: 50000, // Number of rotations to make in the specified time. repeatCount: 1, }); }, { once: true } ); // Stop animation after flying around. // At any time stop the animation. map.addEventListener('gmp-click', () => { map.stopCameraAnimation(); }); } void init();