Kullanıcılarınıza daha etkileyici bir deneyim sunmak için 3D haritanıza kamera yolu animasyonları ekleyebilirsiniz. Kamera yolu animasyonları, haritadaki bir noktaya uçabilir veya bu noktanın etrafında uçabilir.
Aşağıdaki örnekte flyCameraTo ve flyCameraAround animasyonları birleştirilmiştir:
Tam örnek kaynak kodunu görüntüleme
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>Örneği deneyin
Önceden ayarlanmış kamera rotaları
Maps JavaScript'teki 3D Haritalar, iki hazır kamera yolu sunar. Kamera yolları, animasyonun süresi değiştirilerek (böylece hız artırılır veya azaltılır) ya da daha sinematik deneyimler oluşturmak için birleştirilerek özelleştirilebilir.
Ayrıca, altitudeMode değerini belirterek kameranın yüksekliğini kontrol edebilirsiniz.
Maps JavaScript'teki 3D Haritalar aşağıdaki kamera yollarını destekler:
flyCameraToanimasyonu, harita merkezinden belirtilen bir hedefe doğru uçar.flyCameraAroundanimasyonu, haritada belirtilen sayıda dönüş yaparak bir nokta etrafında döner.
İki mevcut yol, ilgi çekici bir noktaya uçmak, etrafında dönmek ve belirtilen zamanda durmak için birleştirilebilir.
Git
Aşağıdaki kod örneğinde, kameranın bir konuma uçmasını sağlayacak şekilde nasıl animasyon oluşturulacağı gösterilmektedir:
map.flyCameraTo({ // Where we are going to. endCamera: flyToCamera, // How long we want the flight to take. durationMillis: 30000, });
Uçarak dolaşma
Aşağıdaki kod örneğinde, kameranın bir konumun etrafında uçacak şekilde nasıl animasyonlandırılacağı gösterilmektedir:
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, });
Animasyonları birleştirme
Aşağıdaki kod örneğinde, kamerayı bir konuma uçurmak ve ilk animasyon sona erdiğinde konumun etrafında döndürmek için animasyonların nasıl birleştirileceği gösterilmektedir:
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();