마커

마커를 사용하여 지도에서 사용자의 주의를 특정 위치로 유도합니다. 이 가이드에서는 3D 지도에서 마커를 사용하고 맞춤설정하는 방법을 보여줍니다. 마커가 표시되는 고도 외에도 마커의 모양, 크기, 색상을 제어할 수 있습니다. 다음 예시에서는 기본 마커를 보여줍니다.

Maps JavaScript의 3D 지도는 각각 특정 용도에 맞게 최적화된 두 가지 고유한 마커 클래스를 제공합니다. 다음 표에서는 사용 가능한 두 클래스 간의 차이점과 장단점을 보여줍니다.

기능 MarkerElement Marker3DElement
맞춤설정 높음 (맞춤 HTML 요소, 핵심 애니메이션 API 등 지원) 낮음 (맞춤설정 가능성이 낮음)
성능 낮은 상호작용 성능 (마커 수가 많으면 FPS가 떨어짐) 높은 상호작용 성능 (대규모 데이터 세트 렌더링에 최적화됨)
권장 용량 최대 약 1,000개의 마커에 대한 안정적인 상호작용 성능 1,000개가 넘는 마커를 처리하는 데 권장됨

색상, 크기, 아이콘 이미지 맞춤설정

기본 마커의 배경, 글리프, 테두리 색상, 크기를 맞춤설정합니다.

맞춤 마커

기본 마커 아이콘을 맞춤 SVG 리소스로 대체합니다.

그래픽이 있는 마커

마커 고도 설정

마커를 돌출시키고 고도를 설정하여 마커 고도를 설정할 수 있습니다.

돌출된 마커

마커가 클릭 및 키보드 이벤트에 반응하도록 설정

click 이벤트 리스너를 추가하여 마커가 클릭 및 키보드 이벤트에 반응하도록 합니다.

const interactiveMarker = new Marker3DInteractiveElement({
    position,
    gmpPopoverTargetElement: popover,
});

마커 충돌 동작 설정

마커가 다른 마커 또는 지도 라벨과 충돌할 때의 동작을 지정합니다.

const marker = new Marker3DElement({
    position: { lat, lng },
    // Try setting a different collision behavior here.
    collisionBehavior: 'REQUIRED',
});

마커 성능

맞춤 HTML 마커 (MarkerElement)는 표준 3D 마커 (Marker3DElement)보다 성능이 낮습니다. 마커가 1,000개가 넘는 애플리케이션의 경우 최적의 성능을 보장하기 위해 Marker3dElement 클래스를 사용하는 것이 좋습니다.

다음 단계