متحرک سازی مسیرهای دوربین

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

شما می‌توانید انیمیشن‌های مسیر دوربین را به نقشه سه‌بعدی خود اضافه کنید تا تجربه‌ای فراگیرتر برای کاربرانتان فراهم کنید. انیمیشن‌های مسیر دوربین می‌توانند به سمت یا دور یک نقطه روی نقشه حرکت کنند.

مثال زیر انیمیشن‌های flyCameraTo و flyCameraAround را با هم ترکیب می‌کند:

کد منبع کامل مثال را ببینید

تایپ اسکریپت 

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();

جاوا اسکریپت 

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();

سی‌اس‌اس 

/* 
 * 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>
    <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>

نمونه را امتحان کنید

مسیرهای از پیش تعیین شده دوربین

نقشه‌های سه‌بعدی در Maps JavaScript دو ​​مسیر دوربین از پیش تعیین‌شده ارائه می‌دهد. مسیرهای دوربین را می‌توان با تغییر مدت زمان انیمیشن (در نتیجه افزایش یا کاهش سرعت) یا با ترکیب آنها برای ایجاد تجربیات سینمایی‌تر، سفارشی‌سازی کرد. علاوه بر این، می‌توانید ارتفاع دوربین را با مشخص کردن altitudeMode کنترل کنید.

نقشه‌های سه‌بعدی در Maps JavaScript از مسیرهای دوربین زیر پشتیبانی می‌کنند:

  • انیمیشن flyCameraTo از مرکز نقشه به مقصد مشخص شده پرواز می‌کند.
  • انیمیشن flyCameraAround به تعداد مشخص شده دور یک نقطه روی نقشه می‌چرخد.

دو مسیر موجود را می‌توان با هم ترکیب کرد تا به نقطه مورد نظر پرواز کنند، دور آن بچرخند و سپس در زمان مشخص شده متوقف شوند.

پرواز به

نمونه کد زیر، متحرک‌سازی دوربین برای پرواز به سمت یک مکان را نشان می‌دهد: 

map.flyCameraTo({
    // Where we are going to.
    endCamera: flyToCamera,
    // How long we want the flight to take.
    durationMillis: 30000,
});

پرواز در اطراف

نمونه کد زیر، متحرک‌سازی دوربین برای پرواز در اطراف یک مکان را نشان می‌دهد: 

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,
});

ترکیب انیمیشن‌ها

نمونه کد زیر ترکیب انیمیشن‌ها را برای انتقال دوربین به یک مکان و سپس چرخش آن در اطراف مکان پس از پایان انیمیشن اول نشان می‌دهد: 

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();