โต้ตอบกับแผนที่

หน้านี้อธิบายเหตุการณ์อินเทอร์เฟซผู้ใช้และเหตุการณ์ข้อผิดพลาดที่คุณสามารถรับฟังและจัดการได้โดยใช้โปรแกรม

เหตุการณ์อินเทอร์เฟซผู้ใช้

ส่วนนี้จะอธิบายเหตุการณ์แบบโต้ตอบและการแจ้งเตือนการเปลี่ยนแปลงสถานะที่คุณสามารถรับฟังและจัดการได้โดยใช้โปรแกรมเมื่อทำงานกับแผนที่ 3 มิติ JavaScript ภายในเบราว์เซอร์เป็นแบบขับเคลื่อนด้วยเหตุการณ์ ซึ่งหมายความว่าจะตอบสนองต่อการโต้ตอบของผู้ใช้ด้วยการสร้างเหตุการณ์ที่โปรแกรมของคุณสามารถรับฟังและเรียกใช้โค้ดตามนั้นได้

เหตุการณ์มี 2 ประเภทหลัก ได้แก่

  • เหตุการณ์การโต้ตอบของผู้ใช้ (เช่น การคลิกเมาส์) จะเผยแพร่จากวิวพอร์ตแผนที่ 3 มิติไปยังโค้ดของคุณ เหตุการณ์เหล่านี้ช่วยให้คุณตอบสนองต่อการดำเนินการโดยตรงของผู้ใช้ภายในสภาพแวดล้อมแผนที่ 3 มิติได้ ดู ตัวอย่าง
  • การแจ้งเตือนการเปลี่ยนแปลงสถานะจะแสดงการอัปเดตโมเดลข้อมูลแผนที่ 3 มิติและสถานะการแสดงผลที่อยู่เบื้องหลัง โดยใช้รูปแบบการตั้งชื่อ gmp-propertychange แบบเดิม

ออบเจ็กต์ API การทำแผนที่ 3 มิติแต่ละรายการจะแสดงชุดเหตุการณ์ที่มีชื่อซึ่งโปรแกรมของคุณสามารถลงทะเบียน Listener ของเหตุการณ์และเรียกใช้ตรรกะเมื่อเกิดเหตุการณ์เหล่านั้นโดยใช้ฟังก์ชัน 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: "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>

ลองใช้ตัวอย่าง