التفاعل مع الخريطة

تصف هذه الصفحة أحداث واجهة المستخدم وأحداث الخطأ التي يمكنك الاستماع إليها ومعالجتها آليًا.

أحداث واجهة المستخدم

يصف هذا القسم الأحداث التفاعلية وإشعارات تغيير الحالة التي يمكنك الاستماع إليها ومعالجتها آليًا عند استخدام الخرائط الثلاثية الأبعاد. تستجيب لغة JavaScript في المتصفّح لتفاعلات المستخدم من خلال إنشاء أحداث يمكن لبرنامجك الاستماع إليها وتنفيذ الرمز البرمجي وفقًا لذلك.

هناك نوعان رئيسيان من الأحداث:

  • يتم نشر أحداث تفاعل المستخدم (مثل نقرات الماوس) من إطار عرض الخريطة الثلاثية الأبعاد إلى الرمز البرمجي. تتيح لك هذه الأحداث الاستجابة لإجراءات المستخدم المباشرة في بيئة الخريطة الثلاثية الأبعاد. عرض نموذج.
  • تعكس إشعارات تغيير الحالة التعديلات التي يتم إجراؤها على نماذج بيانات الخريطة الثلاثية الأبعاد الأساسية وحالة العرض، باستخدام نظام تسمية تقليدي gmp-propertychange.

يعرض كل عنصر من عناصر واجهة برمجة تطبيقات الخرائط الثلاثية الأبعاد مجموعة من الأحداث المُسمّاة التي يمكن لبرنامجك تسجيل مستمعي الأحداث لها وتنفيذ المنطق عند وقوع هذه الأحداث باستخدام الدالة المضمّنة 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>

تجربة نموذج