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

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

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

يوضّح هذا القسم الأحداث التفاعلية وإشعارات تغيير الحالة التي يمكنك الاستماع إليها والتعامل معها آليًا عند استخدام الخرائط الثلاثية الأبعاد. تعتمد لغة 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>

تجربة عيّنة