충돌 동작 제어

이 페이지에서는 마커의 충돌 동작을 설정하는 방법을 보여줍니다. 충돌 동작은 마커가 다른 마커와 충돌하는 (겹치는) 경우 표시되는 방식을 관리합니다.

충돌 동작을 설정하려면 collisionBehavior를 다음 중 하나로 설정하세요.

• REQUIRED: 충돌과 관계없이 항상 마커를 표시합니다.
• REQUIRED_AND_HIDES_OPTIONAL: 충돌과 관계없이 항상 마커를 표시하고 마커와 겹치는 OPTIONAL_AND_HIDES_LOWER_PRIORITY 마커 또는 라벨을 숨깁니다.
• OPTIONAL_AND_HIDES_LOWER_PRIORITY: 마커가 다른 마커와 겹치지 않는 경우에만 마커를 표시합니다. 이 유형의 마커 두 개가 겹치면 zIndex가 더 높은 마커가 표시됩니다. zIndex가 동일하면 세로 화면 위치가 더 낮은 마커가 표시됩니다.

다음 예는 마커의 충돌 동작을 설정하는 방법을 보여줍니다.

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

라벨의 충돌 동작 제어

마커의 핀과 라벨 텍스트의 충돌 동작을 별도로 제어할 수 있습니다. 경우에 따라 컨텍스트를 유지하기 위해 화면에 마커 핀을 표시한 상태로 라벨을 숨기는 것이 유용할 수 있습니다. 이렇게 하려면, <gmp-label-3d> 요소를 형제로 추가하고 <gmp-marker-3d>의 링크 를 for 속성을 사용하여 연결합니다.

다음 코드 샘플에서는 마커와 별도로 라벨의 충돌 동작을 설정하는 방법을 보여줍니다.

const markerWithIndependentLabel = new Marker3DElement({
    position: { lat: 37.423, lng: -122.015 },
});
markerWithIndependentLabel.id = 'marker-1';
const label = new Label3DElement({
    collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY,
    for: 'marker-1',
});
label.append('Independent label example');
map.append(markerWithIndependentLabel);
map.append(label);
index.js