कैमरे के पाथ को ऐनिमेट करना

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

अपने 3D मैप में कैमरा पाथ ऐनिमेशन जोड़े जा सकते हैं. इससे, उपयोगकर्ताओं को ज़्यादा इमर्सिव अनुभव मिलता है. कैमरा पाथ ऐनिमेशन, मैप पर किसी पॉइंट के ऊपर से उड़ सकते हैं या उसके चारों ओर घूम सकते हैं.

यहां दिए गए उदाहरण में, flyCameraTo और flyCameraAround ऐनिमेशन को एक साथ इस्तेमाल करने का तरीका बताया गया है:

पूरे उदाहरण का सोर्स कोड देखना

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

सीएसएस

/* 
 * 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 में 3D Maps की सुविधा, कैमरे के दो प्रीसेट पाथ उपलब्ध कराती है. एनिमेशन की अवधि बदलकर, कैमरा पाथ को पसंद के मुताबिक बनाया जा सकता है. इससे स्पीड बढ़ाई या कम की जा सकती है. इसके अलावा, कैमरा पाथ को मिलाकर ज़्यादा सिनेमैटिक अनुभव भी बनाए जा सकते हैं. इसके अलावा, altitudeMode की वैल्यू सेट करके, कैमरे की ऊंचाई को कंट्रोल किया जा सकता है.

Maps JavaScript में 3D Maps की सुविधा के साथ, ये कैमरा पाथ काम करते हैं:

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