Mit der Karte interagieren

Auf dieser Seite werden die UI- und Fehlerereignisse beschrieben, die programmatisch erfasst und verarbeitet werden können.

Ereignisse auf der Benutzeroberfläche

In diesem Abschnitt werden die interaktiven Ereignisse und Benachrichtigungen über Zustandsänderungen beschrieben, die Sie programmatisch erfassen und verarbeiten können, wenn Sie mit 3D-Karten arbeiten. JavaScript im Browser ist ereignisgesteuert. Das heißt, es reagiert auf Nutzerinteraktionen, indem es Ereignisse generiert, auf die Ihr Programm warten und entsprechend Code ausführen kann.

Es gibt zwei Haupttypen von Ereignissen:

  • Nutzerinteraktionsereignisse (z. B. Mausklicks) werden vom 3D-Karten-Viewport an Ihren Code weitergeleitet. Mit diesen Ereignissen können Sie auf direkte Nutzeraktionen in der 3D-Kartenumgebung reagieren. Beispiel ansehen
  • Benachrichtigungen zu Statusänderungen geben Aufschluss über Aktualisierungen der zugrunde liegenden 3D-Kartendatenmodelle und des Rendering-Status. Dabei wird ein herkömmliches gmp-propertychange-Benennungsschema verwendet.

Jedes 3D Mapping API-Objekt stellt eine Reihe benannter Ereignisse zur Verfügung, für die Ihr Programm Event-Listener registrieren und Logik ausführen kann, wenn diese Ereignisse mit der integrierten addEventListener()-Funktion eintreten.

Im folgenden Beispiel wird gezeigt, welche Ereignisse ausgelöst werden, wenn ein Nutzer mit der Karte interagiert:

Vollständigen Quellcode des Beispiels ansehen

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>

Testbeispiel