지도 상의 좁은 범위 상에 customOverlay를 여러개 만든 이후, 지도를 축소하면
현재로서는 Overlay가 겹치게 됩니다.
혹시 이게 겹치지 않고 표출될 수 있는 방법이 있는지 궁금합니다.
오버레이가 완전히 겹치는 상황이 아니라면 마우스 이벤트를 등록해서 zIndex 값을 올려서 상위에 표출할 수 있습니다.
또는 클러스터러를 사용해서 오버레이 수 표출 → 클러스터러 클릭 시 좌측 메뉴에서 포함된 데이터 정보 표출 →
선택한 커스텀 오버레이 지도에 표시하는 방법 (다음 부동산 참고)
아래 예제와 같이 메뉴에 간략한 정보를 표시하고 선택한 정보의 오버레이를 표출하는 방법으로도 구현할 수 있습니다.
http://apis.map.kakao.com/web/sample/keywordList/
아래 답변도 함께 참고해주세요.
https://devtalk.kakao.com/t/topic/65343/2?u=lea.ju
카카오 지도 WEB API의 샘플처럼 customOverlay 가 지도 상에 여러 개 존재해야 합니다.
첨부된 사진과 같이, 여러 개의 customOverlay 가 지도상에 존재하면 서로 겹치게 되는데,
저 overlay가 겹치지 않게 표출되는 방법이 존재하는지 궁금합니다.
customOverlay는 여러 개가 동시에 떠 있어야 하며, 제시해주신 것처럼 최대 1개만 떠있는 것이 아닌 n개 입니다.
위 답변으로 오버레이가 N개일 경우 표현 방법을 제시해드렸습니다.
지도를 축소하게 되면 오버레이가 겹쳐서 보일 수밖에 없습니다.
사용자의 가시화를 위해서는 레벨이 축소되는 경우 모든 오버레이를 보여주기보다
특정 오버레이를 정리해서 표출하는 것도 방법일 수 있습니다.
위 답변과 아래 방법, 다른 사이트에서 적용한 UI를 참고해서 구현해주세요.
- 마우스 오버/아웃 이벤트를 등록해서 이벤트에 걸린 오버레이의 zIndex를 올려주는 방법
- 중첩이 되는 특정 레벨에서 오버레이들을 클러스터러와 같은 라이브러리를 사용해 통합해 보여주는 방법
- 오버레이의 간략한 내용을 좌측 메뉴를 이용해 보여주고, 해당 내용을 마우스 오버/클릭하면 지도에 오버레이를 표시
또는 오버레이 위치와 적당한 레벨로 지도를 이동하는 방법 - 오버레이의 우선순위를 정해 겹쳐질 경우 우선순위가 높은 오버레이를 표출하는 방법 등…
http://apis.map.kakao.com/web/documentation/#CustomOverlay_setZIndex
https://realty.daum.net/home/apt/map