Możesz dodać do mapy 3D animacje ścieżek kamery, aby zapewnić użytkownikom bardziej wciągające wrażenia. Animacje ścieżki kamery mogą przelatywać do punktu na mapie lub wokół niego.
W tym przykładzie połączono animacje flyCameraTo i flyCameraAround:
Zobacz pełny przykładowy kod źródłowy
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>Wypróbuj przykład
Gotowe ścieżki kamery
Mapy 3D w interfejsie Maps JavaScript API udostępniają 2 gotowe ścieżki kamery. Ścieżki kamery można dostosowywać, zmieniając czas trwania animacji (zwiększając lub zmniejszając prędkość) albo łącząc je, aby tworzyć bardziej filmowe efekty.
Możesz też sterować wysokością kamery, określając parametr
altitudeMode.
Mapy 3D w JavaScript obsługują te ścieżki kamery:
- Animacja
flyCameraToprzelatuje ze środka mapy do określonego miejsca docelowego. - Animacja
flyCameraAroundobraca się wokół punktu na mapie o określoną liczbę obrotów.
Dostępne są 2 ścieżki, które można połączyć, aby przelecieć do wybranego punktu, obrócić się wokół niego, a następnie zatrzymać w określonym miejscu.
Przejdź do
Poniższy przykładowy kod pokazuje, jak animować kamerę, aby przeleciała do określonej lokalizacji:
map.flyCameraTo({ // Where we are going to. endCamera: flyToCamera, // How long we want the flight to take. durationMillis: 30000, });
Przelatywanie
Poniższy przykładowy kod pokazuje, jak animować kamerę, aby przelatywała wokół lokalizacji:
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, });
Łączenie animacji
Poniższy przykładowy kod pokazuje, jak połączyć animacje, aby przenieść kamerę do lokalizacji, a następnie obracać ją wokół tej lokalizacji po zakończeniu pierwszej animacji:
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();