मैप के साथ इंटरैक्ट करना

इस पेज पर, यूज़र इंटरफ़ेस इवेंट और गड़बड़ी वाले इवेंट के बारे में बताया गया है. इन्हें सुना जा सकता है और प्रोग्राम के हिसाब से हैंडल किया जा सकता है.

यूज़र इंटरफ़ेस इवेंट

इस सेक्शन में, इंटरैक्टिव इवेंट और स्थिति में बदलाव होने पर मिलने वाली सूचनाओं के बारे में बताया गया है. 3D मैप का इस्तेमाल करते समय, इन सूचनाओं को सुना जा सकता है और प्रोग्राम के हिसाब से मैनेज किया जा सकता है. ब्राउज़र में JavaScript, इवेंट पर आधारित होती है. इसका मतलब है कि यह उपयोगकर्ता के इंटरैक्शन पर प्रतिक्रिया देती है. इसके लिए, यह ऐसे इवेंट जनरेट करती है जिन्हें आपका प्रोग्राम सुन सकता है और उसके हिसाब से कोड को एक्ज़ीक्यूट कर सकता है.

इवेंट मुख्य तौर पर दो तरह के होते हैं:

  • उपयोगकर्ता के इंटरैक्शन वाले इवेंट (जैसे कि माउस क्लिक) को 3D मैप व्यूपोर्ट से आपके कोड में भेजा जाता है. इन इवेंट की मदद से, 3D मैप एनवायरमेंट में उपयोगकर्ता की कार्रवाइयों का जवाब दिया जा सकता है. सैंपल देखें.
  • स्टेट में बदलाव होने की सूचनाएं, 3D मैप के डेटा मॉडल और रेंडरिंग की स्थिति में हुए अपडेट को दिखाती हैं. इसके लिए, gmp-propertychange नाम रखने के सामान्य तरीके का इस्तेमाल किया जाता है.

3D Mapping API का हर ऑब्जेक्ट, नाम वाले इवेंट का एक सेट दिखाता है. आपका प्रोग्राम, इन इवेंट के लिए इवेंट लिसनर रजिस्टर कर सकता है. साथ ही, इन इवेंट के होने पर, addEventListener() फ़ंक्शन का इस्तेमाल करके लॉजिक को लागू कर सकता है.

नीचे दिए गए उदाहरण में बताया गया है कि जब कोई उपयोगकर्ता मैप से इंटरैक्ट करता है, तो कौनसे इवेंट ट्रिगर होते हैं:

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

TypeScript

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

JavaScript

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>

सैंपल आज़माएं