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

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

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

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

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

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

हर 3D मैपिंग एपीआई ऑब्जेक्ट, नाम वाले इवेंट का एक सेट दिखाता है. आपका प्रोग्राम, इन इवेंट के लिए इवेंट लिसनर रजिस्टर कर सकता है. साथ ही, इन इवेंट के होने पर, 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();

CSS

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

<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: "GOOGLE_MAPS_API_KEY"
            });
        </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>