মানচিত্রের সাথে যোগাযোগ করুন

এই পৃষ্ঠায় সেইসব ইউজার ইন্টারফেস ইভেন্ট এবং এরর ইভেন্ট সম্পর্কে বর্ণনা করা হয়েছে, যেগুলো আপনি প্রোগ্রাম্যাটিকভাবে লিসেন ও হ্যান্ডেল করতে পারেন।

User Interface Events

This section outlines the interactive events and state change notifications you can listen for and handle programmatically when working with 3D maps. JavaScript within the browser is event-driven, meaning it responds to user interactions by generating events that your program can listen to and execute code accordingly.

There are two main types of events:

  • ব্যবহারকারীর ইন্টারঅ্যাকশন ইভেন্টগুলো (যেমন মাউস ক্লিক) ৩ডি ম্যাপ ভিউপোর্ট থেকে আপনার কোডে পাঠানো হয়। এই ইভেন্টগুলো আপনাকে ৩ডি ম্যাপ পরিবেশের মধ্যে সরাসরি ব্যবহারকারীর কার্যকলাপের প্রতিক্রিয়া জানাতে সাহায্য করে। নমুনা দেখুন ।
  • স্টেট পরিবর্তনের নোটিফিকেশনগুলো প্রচলিত gmp-propertychange নামকরণের স্কিম ব্যবহার করে অন্তর্নিহিত 3D ম্যাপ ডেটা মডেল এবং রেন্ডারিং স্টেটের আপডেট প্রতিফলিত করে।

Each 3D mapping API object exposes a set of named events that your program can register event listeners for and execute logic when those events occur using the built-in addEventListener() function.

নিম্নলিখিত উদাহরণটি দেখায় যে একজন ব্যবহারকারী যখন মানচিত্রের সাথে ইন্টারঅ্যাক্ট করেন তখন কোন ইভেন্টগুলি ট্রিগার হয়:

See the complete example source code

টাইপস্ক্রিপ্ট 

const mapElement = document.querySelector('gmp-map-3d')!;

async function init() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps3d');

    const events = [...document.querySelectorAll('div > p')].map(
        (i) => i.textContent
    );
    for (const event of events) {
        mapElement?.addEventListener(event, () => {
            const eventElement = document.querySelector(`#${event}`);
            eventElement?.classList.add('active');
            setTimeout(() => {
                eventElement?.classList.remove('active');
            }, 1000);
        });
    }
}

void init();

জাভাস্ক্রিপ্ট 

const mapElement = document.querySelector('gmp-map-3d');

async function init() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps3d');

    const events = [...document.querySelectorAll('div > p')].map(
        (i) => i.textContent
    );
    for (const event of events) {
        mapElement?.addEventListener(event, () => {
            const eventElement = document.querySelector(`#${event}`);
            eventElement?.classList.add('active');
            setTimeout(() => {
                eventElement?.classList.remove('active');
            }, 1000);
        });
    }
}

void init();

সিএসএস 

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: flex;
    flex-direction: row;
}
gmp-map-3d {
    flex-grow: 1;
}
.myaside {
    flex-basis: 25%;
    font-family:
        Droid Sans Mono,
        monospace;
    font-size: 15px;
    padding: 2px;
}
.myaside > p.active {
    background-color: #9cf;
}

এইচটিএমএল 

<html>
    <head>
        <title>3d-map-events</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>
        <gmp-map-3d
            mode="hybrid"
            center="40.6338, 14.6028, 54.82"
            range="1000"
            tilt="65"></gmp-map-3d>
        <div class="myaside">
            <p id="gmp-centerchange">gmp-centerchange</p>
            <p id="gmp-click">gmp-click</p>
            <p id="gmp-headingchange">gmp-headingchange</p>
            <p id="gmp-rangechange">gmp-rangechange</p>
            <p id="gmp-rollchange">gmp-rollchange</p>
            <p id="gmp-steadychange">gmp-steadychange</p>
            <p id="gmp-tiltchange">gmp-tiltchange</p>
        </div>
    </body>
</html>

নমুনা চেষ্টা করুন