안녕하세요!!
초급 개발자입니다!.. 수많은 검색과 삽질을 겪고 도움을 요청드려보고자 첫 문의글을 남깁니다!!
현재 행정구역을 나눠서 폴리곤 영역을 찍었습니다.
그리고 중심좌표에 CustomOverlay 를 찍고 지역명을 표시하는 로직을 개발했는데요.
개발하고자 하는 요구사항은 이렇습니다.
-
특정 레벨로 ‘확대’ 시, 기존 오버레이와 폴리곤을 모두 제거하고, 마커 클러스터링 적용
-
다시 지도를 특정 레벨로 ‘축소’ 시, 본래 행정구역의 커스텀 오버레이 재생성 후 표시
그런데, 2번 액션을 취한 경우 커스텀 오버레이는 잘 찍히나 이벤트가 일부 안되는 것들이 발생하네요. (지도 영역 밖인 경우)
혹시나 해서 아래와 같이 하면 이벤트가 잘 먹히는 것을 확인했습니다.
처음 행정구역을 찍고 지도를 축소함 (모든 오버레이가 영역안에 있도록)
오버레이를 찍고 이벤트를 등록함
현재 이벤트는 Polygon 루프블럭 안에서 오버레이를 생성합니다. 그런 후, Content 에 id 값을 개별로 줘서 그에 따른 이벤트를 Jquery 로 직접 주고 있거든요.
예 ) $.(’#inner2’).on(~~~)
현재 API 에서 커스텀오버레이에 대한 이벤트 로직이 따로 없는걸로 아는데 맞는지요??
혹시나 선택자로 이벤트를 주입하는게 아니라 오버레이 객체에 직접적인 이벤트를 주는 방법이 없을까 해서 자문을 구해봅니다.
JS 는 주분야가 아니라서 여기서 막히었네요 ㅠㅠ
커스텀 오버레이 객체에 직접 이벤트를 등록할 수 없습니다.
만약 등록된 이벤트를 유지하고 싶으시다면
내부 컨텐츠를 작성하실 때
문자열로 하지 마시고
이런식으로 만들어서 이벤트를 걸어주세요.
허… 한번에 해결되었습니다 ㅠ 너무 감사합니다!!
혹시 저렇게 구현하면 되는 이유에 대해서 추가적으로 궁금하네요
돔 엘리먼트를 찾아서 이벤트를 주입해주는 경우엔, 영역 밖의 엘리먼트를 찾지 못해서 이벤트가 안걸린 것이라면
해당 객체가 생성될 때 바로 주입해주기 때문에 영역 밖에 있어도 이벤트가 걸리는 게 맞는지요?
글쎄요… 원인은 코드 전체를 봐야 알 수 있습니다.
제가 속단하긴 어려울 것 같네요.
제가 알려드린 방식은,
아시다시피 굳이 커스텀오버레이어 넣지 않고 단독으로 DOM tree에 올려도 이벤트가 동작할겁니다.
그 객체의 참조가 계속 유지되는 것인데 반해,
문자열을 넣어 컨텐츠를 구성해 주는건 커스텀 오버레이를 생성할 때마다 새로이 만들다는 얘기이고
jquery로 셀렉팅하고 이벤트를 걸었던 엘리먼트가 삭제되고 새로이 만들어진 것이 지도에 표출되면 당연히 이벤트는 동작 안 합니다.
- 커스텀 오버레이가 문자열을 받아 내부에서 HTML Element content를 생성 (id는 inner라고 가정)
-
$('#inner').click(fn); 으로 이벤트를 등록.
- 특정 시점에 해당 커스텀 오버레이는 삭제
- 다시 같은 컨텐츠를 사용하는 커스텀 오버레이를 생성
- 같은 아이디를 부여했더라도 기존 엘리먼트가 사라졌으므로 이벤트는 동작하지 않음
새로운 커스텀 오버레이를 동작시키기 위해서는 이벤트를 다시 걸어주어야 합니다.
보통은 이렇게 만들지 않습니다.
레벨 조건에 맞는 커스텀 오버레이를 만들어 놓고 그 참조는 유지 시킵니다.
매 번 컨텐츠를 사용하여 커스텀 오버레이를 만드는게 아니라
컨텐츠를 들고 있는 커스텀 오버레이 자체를 재사용 합니다.
