Bạn có thể thêm ảnh động đường dẫn camera vào bản đồ 3D để mang đến trải nghiệm sống động hơn cho người dùng. Ảnh động đường dẫn camera có thể bay đến hoặc bay xung quanh một điểm trên bản đồ.
Ví dụ sau đây kết hợp các ảnh động flyCameraTo và flyCameraAround:
Xem mã nguồn ví dụ hoàn chỉnh
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>Dùng thử mẫu
Đường dẫn camera đặt sẵn
Bản đồ 3D trong Maps JavaScript cung cấp 2 đường dẫn camera đặt sẵn. Bạn có thể tuỳ chỉnh đường dẫn camera bằng cách thay đổi thời lượng của ảnh động (do đó tăng hoặc giảm tốc độ) hoặc bằng cách kết hợp các đường dẫn này để tạo ra trải nghiệm điện ảnh hơn.
Ngoài ra, bạn có thể kiểm soát chiều cao của camera bằng cách chỉ định altitudeMode.
Bản đồ 3D trong Maps JavaScript hỗ trợ các đường dẫn camera sau:
- Ảnh động
flyCameraTobay từ tâm bản đồ đến một đích đến cụ thể. - Ảnh động
flyCameraAroundxoay quanh một điểm trên bản đồ với số vòng quay được chỉ định.
Bạn có thể kết hợp hai đường dẫn có sẵn để bay đến một địa điểm yêu thích, xoay quanh điểm đó rồi dừng lại khi được chỉ định.
Chuyển đến
Mã mẫu sau đây minh hoạ cách tạo hiệu ứng cho camera bay đến một vị trí:
map.flyCameraTo({ // Where we are going to. endCamera: flyToCamera, // How long we want the flight to take. durationMillis: 30000, });
Bay xung quanh
Mã mẫu sau đây minh hoạ cách tạo hiệu ứng cho camera bay xung quanh một vị trí:
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, });
Kết hợp ảnh động
Đoạn mã mẫu sau đây minh hoạ cách kết hợp các ảnh động để di chuyển camera đến một vị trí, sau đó xoay quanh vị trí đó khi ảnh động đầu tiên kết thúc:
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();