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

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

ব্যবহারকারী ইন্টারফেস ইভেন্ট

এই বিভাগে সেইসব ইন্টারেক্টিভ ইভেন্ট এবং অবস্থা পরিবর্তনের নোটিফিকেশনগুলো তুলে ধরা হয়েছে, যা আপনি 3D ম্যাপ নিয়ে কাজ করার সময় প্রোগ্রাম্যাটিকভাবে শুনতে ও পরিচালনা করতে পারেন। ব্রাউজারের জাভাস্ক্রিপ্ট ইভেন্ট-চালিত, অর্থাৎ এটি ব্যবহারকারীর ইন্টারঅ্যাকশনের প্রতিক্রিয়ায় ইভেন্ট তৈরি করে, যা আপনার প্রোগ্রাম শুনতে পারে এবং সেই অনুযায়ী কোড কার্যকর করতে পারে।

দুই ধরনের প্রধান অনুষ্ঠান রয়েছে:

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

প্রতিটি 3D ম্যাপিং API অবজেক্ট কিছু নামযুক্ত ইভেন্ট প্রকাশ করে, যেগুলোর জন্য আপনার প্রোগ্রাম ইভেন্ট লিসেনার রেজিস্টার করতে পারে এবং বিল্ট-ইন addEventListener() ফাংশন ব্যবহার করে সেই ইভেন্টগুলো ঘটলে লজিক কার্যকর করতে পারে।

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

সম্পূর্ণ উদাহরণ সোর্স কোড দেখুন

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

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>

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