지도와 상호작용

이 페이지에서는 수신 대기 및 프로그래매틱 방식으로 처리할 수 있는 사용자 인터페이스 이벤트와 오류 이벤트를 설명합니다.

사용자 인터페이스 이벤트

이 섹션에서는 3D 지도로 작업할 때 수신 대기하고 프로그래매틱 방식으로 처리할 수 있는 상호작용 이벤트와 상태 변경 알림을 간략히 설명합니다. 브라우저 내의 JavaScript는 이벤트 구동 방식입니다. 즉, 프로그램이 수신 대기하고 그에 따라 코드를 실행할 수 있는 이벤트를 생성하여 사용자 상호작용에 응답합니다.

이벤트에는 두 가지 기본 유형이 있습니다.

  • 사용자 상호작용 이벤트 (예: 마우스 클릭)는 3D 지도 뷰포트에서 코드로 전파됩니다. 이러한 이벤트를 사용하면 3D 지도 환경 내에서 직접적인 사용자 작업에 응답할 수 있습니다. 샘플 보기
  • 상태 변경 알림은 기본 3D 지도 데이터 모델과 렌더링 상태의 업데이트를 반영하며, 기존의 gmp-propertychange 명명 규칙을 사용합니다.

각 3D 매핑 API 객체는 프로그램이 이벤트 리스너를 등록하고 내장된 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();

자바스크립트

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>

샘플 사용해 보기