Tương tác với bản đồ

Trang này mô tả các sự kiện giao diện người dùng và sự kiện lỗi mà bạn có thể nghe và xử lý theo phương thức lập trình.

Sự kiện giao diện người dùng

Phần này trình bày các sự kiện tương tác và thông báo thay đổi trạng thái mà bạn có thể theo dõi và xử lý theo phương thức lập trình khi làm việc với bản đồ 3D. JavaScript trong trình duyệt hoạt động theo sự kiện, tức là phản hồi các hoạt động tương tác của người dùng bằng cách tạo ra các sự kiện mà chương trình của bạn có thể theo dõi và thực thi mã tương ứng.

Có hai loại sự kiện chính:

  • Các sự kiện tương tác của người dùng (chẳng hạn như lượt nhấp chuột) được truyền từ khung nhìn bản đồ 3D đến mã của bạn. Các sự kiện này cho phép bạn phản hồi hành động trực tiếp của người dùng trong môi trường bản đồ 3D. Xem mẫu.
  • Thông báo thay đổi trạng thái phản ánh thông tin cập nhật về các mô hình dữ liệu bản đồ 3D cơ bản và trạng thái kết xuất, sử dụng quy ước đặt tên gmp-propertychange.

Mỗi đối tượng API Bản đồ 3D đều hiển thị một tập hợp các sự kiện được đặt tên mà chương trình của bạn có thể đăng ký trình nghe sự kiện và thực thi logic khi các sự kiện đó xảy ra bằng cách sử dụng hàm addEventListener() tích hợp sẵn.

Ví dụ sau đây cho thấy những sự kiện được kích hoạt khi người dùng tương tác với bản đồ:

Xem mã nguồn ví dụ hoàn chỉnh

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: "GOOGLE_MAPS_API_KEY"
            });
        </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>