안녕하세요.
다수의 마커 위에 각각 커스텀 오버레이를 올렸습니다.
각 커스텀 오버레이를 클릭했을 경우 오버레이가 선택되었다는 효과를 주기 위하여
임의의 style class 를 아래 2)와 같이 object 추가해 주었습니다.
- 선택 전 천호동
- 선택 후 천호동
지도 영역의 div 안에서 다른 오버레이를 클릭하면 아래 예시처럼, 기존에 선택된 오버레이의 object class 는 지우고 새로 선택된 오버레이에 object class 를 추가했습니다.
- 이전 선택된 커스텀 오버레이의 object class 속성 제거
$(obj).closest(‘div’).parent().siblings().children().removeClass(‘object’) - 새로 선택된 커스텀 오버레이에 object class 속성 추가
$(obj).closest(‘div’).addClass(“object”);
이렇게 유저가 커스텀 오버레이를 선택할 때마다 선택되었다는 표시를 해주는 방식입니다.
선택된 커스텀 오버레이가 드래그 또는 지도 확대 시 화면에서 사라지더라도 다시 드래그 하거나
축소하면 기존에 선택되었다는 object class 가 그대로 남아서 여전히 원하던 기능으로 동작합니다.
여기까지는 문제없이 잘 작동합니다.
문제는 지도를 드래그하거나 확대하여 선택된 오버레이가 화면에서 사라진 다음,
다음과 같은 시나리오에서는 선택되었다는 오버레이가 2개(또는 그 이상으로 누적 가능)가 됩니다.
- 새로 보이는 영역에서 다른 커스텀 오버레이를 클릭
-> object class 가 새로운 커스텀 오버레이에 추가됨 - 다시 드래그, 축소 등으로 이전에 사라진 커스텀 오버레이가 나타남
-> 이전에 추가된 object class 로 인하여 선택된 오버레이로 보임
다음 idle 또는 zoom_changed 등의 이벤트에서
화면에서 사라진 커스텀 오버레이의 특정 스타일의 class 를 제거할 수 있는 방법이 있는지 궁금합니다.
커스텀 오버레이는 array로 관리하고 있습니다.
kakao.maps.event.addListener(gMap, ‘idle’, () => {
-> 어떻게 처리할 수 있을까요?
}