تعامل با نقشه

این صفحه رویدادهای رابط کاربری و رویدادهای خطایی را که می‌توانید به آنها گوش دهید و از طریق برنامه‌نویسی مدیریت کنید، شرح می‌دهد.

رویدادهای رابط کاربری

این بخش، رویدادهای تعاملی و اعلان‌های تغییر وضعیت را که می‌توانید هنگام کار با نقشه‌های سه‌بعدی به آن‌ها گوش دهید و به صورت برنامه‌نویسی مدیریت کنید، تشریح می‌کند. جاوا اسکریپت در مرورگر رویدادمحور است، به این معنی که با ایجاد رویدادهایی که برنامه شما می‌تواند به آن‌ها گوش دهد و کد را بر اساس آن‌ها اجرا کند، به تعاملات کاربر پاسخ می‌دهد.

دو نوع اصلی از رویدادها وجود دارد:

  • رویدادهای تعامل کاربر (مانند کلیک ماوس) از نمای نقشه سه‌بعدی به کد شما منتقل می‌شوند. این رویدادها به شما امکان می‌دهند به اقدامات مستقیم کاربر در محیط نقشه سه‌بعدی پاسخ دهید. نمونه را مشاهده کنید .
  • اعلان‌های تغییر وضعیت، به‌روزرسانی‌های مدل‌های داده نقشه سه‌بعدی زیربنایی و وضعیت رندر را با استفاده از یک طرح نامگذاری مرسوم gmp-propertychange منعکس می‌کنند.

هر شیء 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>

نمونه را امتحان کنید