Harita ile etkileşim

Bu sayfada, programatik olarak dinleyebileceğiniz ve işleyebileceğiniz kullanıcı arayüzü etkinlikleri ve hata etkinlikleri açıklanmaktadır.

Kullanıcı Arayüzü Etkinlikleri

Bu bölümde, 3D haritalarla çalışırken dinleyebileceğiniz ve programatik olarak işleyebileceğiniz etkileşimli etkinlikler ve durum değişikliği bildirimleri açıklanmaktadır. Tarayıcıdaki JavaScript, etkinliğe dayalıdır. Yani, programınızın dinleyebileceği ve buna göre kod yürütebileceği etkinlikler oluşturarak kullanıcı etkileşimlerine yanıt verir.

İki ana etkinlik türü vardır:

  • Kullanıcı etkileşimi etkinlikleri (ör. fare tıklamaları) 3D harita görüntü alanından kodunuza yayılır. Bu etkinlikler, 3D harita ortamındaki doğrudan kullanıcı işlemlerine yanıt vermenize olanak tanır. Örneği görüntüleyin.
  • Durum değişikliği bildirimleri, geleneksel bir gmp-propertychange adlandırma şeması kullanılarak temel 3D harita verisi modellerinde ve oluşturma durumunda yapılan güncellemeleri yansıtır.

Her 3D Haritalama API nesnesi, programınızın etkinlik dinleyicilerini kaydedebileceği ve bu etkinlikler gerçekleştiğinde yerleşik addEventListener() işlevini kullanarak mantık yürütebileceği bir dizi adlandırılmış etkinlik sunar.

Aşağıdaki örnekte, bir kullanıcı haritayla etkileşim kurarken hangi etkinliklerin tetiklendiği gösterilmektedir:

Tam örnek kaynak kodunu görüntüleme

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>

Örneği deneyin