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ể theo dõi 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 là hướng 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 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 lượt 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 các 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 các bản cập nhật đối với 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 thông thường.

Mỗi đối tượng API lập 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.

Ví dụ sau đây cho biết những sự kiện nào đượ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: "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>

Thử mẫu