커스텀 오버레이 클릭이벤트 문의

카카오맵 API (지도/로컬)
1

안녕하세요.
커스텀오버레이를 클릭하면 마커 클러스터 이벤트가 실행되는것을 개발중에 있습니다.

다름이 아니라 검색해보니 커스텀 오버레이는 마우스클릭이
kakao.maps.addListener( 를 사용할수 없어서

EventTarget.addEventListener(‘click’, handler); 나 $(EventTarget).on(‘click’, handler);를

사용하라고 댓글이 달린것을 읽었습니다.

지금 제가

content = ’ <디iv i d = “overlaybox” cl ass =“overlaybox”>
<스판 class=“left”></s pa n>
<spa n class=“center”)><h 5 class=“sidoCd”>’+sidoCd+’</h 5></spa n>
</sp an></d iv>’;

        // 커스텀 오버레이를 생성합니다
           customOverlay = new kakao.maps.CustomOverlay({
                  position: centroid(points, sidoCd),
                  content: content,
                  clickable: true,
                  zIndex : 4
              });
              customOverlay.setMap(map);    
      }

이런식으로 구현하고 있는데

// Native Dom Event Listener
EventTarget.addEventListener(‘click’, handler);

// jQuery 사용시
$(EventTarget).on(‘click’, handler);

커스텀 오버레이를 클릭하면 마커클러스터 이벤트를 태우려고 하는데
어떻게 적용해야할지 감이 잘 안오네요.
EventTarget을 content 로 쓰면 될까 싶어서
content.addEventListener(“click”, 함수명); 이런식으로 해보았지만 잘 안되서요.

조언 주시면 감사하겠습니다.

2

https://devtalk.kakao.com/t/ajax/81700/2

content 생성을 요로코롬 바꾸시고 이벤트를 걸어야 할 겁니다.

1개의 좋아요
3

답변 달아주신대로 content 생성을 변경하니 클릭 이벤트가 잘 걸립니다. 감사합니다.

그런데 클릭하면 오버레이가 사라지고 클러스터러가 보이게 하고 싶어서

아래와 같이 하니 클러스터러 실행함수는 실행되어 보여지는데

customOverlay.setMap(null); 처리가 안되는거 같습니다.

어떤 처리를 해야하는지 알려주시면 감사하겠습니다.

— 소스 —

var overlayClick = function() {

			initMap(); //클러스터러 실행 함수입니다.				
			customOverlay.setMap(null); //오버레이야 사라져라.....
		};
           
		var $body = $('<div id = "overlaybox" class ="overlaybox"><span class="left"></span><span class="center")><h5 class="sidoCd">'+sidoCd+'</h5></span><span class="right"></span></div>').click(overlayClick); 

		var content = $body[0];
         
        // 커스텀 오버레이를 생성합니다
           customOverlay = new kakao.maps.CustomOverlay({
                  position: centroid(points, sidoCd),
                  content: content,
                  clickable: true,
                  zIndex : 4
              });
              customOverlay.setMap(map);
4

글쎄요. 이 이하부터는 (엄밀히 말하면 위에 것도) 지도 API의 사용과는 직접 관계가 없으며
문서나 예제를 보고 충분히 해결 가능한 상황 같습니다.

첨부하신 코드 조각 상으로는 문제가 없는 것 같은데…

디버깅을 해 보세요.
저 시점에 customOverlay가 뭐가 나오는지,
오류는 없는지,
전역 선언한 변수를 잘 못 사용하고 있는 곳은 없는지

5

전역변수를 잘못 선언해서 그렇더라구요.

덕분에 잘 해결하였습니다 감사합니다.

그런데 오버레이가 사라지긴 하는데 모든 오버레이를 사라지게는 할 수 없는지요?

예를들어 제가 시도 별로 오버레이를 띄우는데

‘서울’ 오버레이를 클릭하면 서울 오버레이만 사라지는데

전국 시도 모든 오버레이를 사라지게 하고싶습니다.

전국이름 오버레이가 사라지고 서울에 해당하는 클러스터를 띄우려고 합니다.

모든 오버레이가 사라지게 하려면 setMap(null)을 어떤식으로 사용해야하는지 알려주시면 감사하겠습니다.

6

다중 커스텀 오버레이라면
커스텀 오버레이를 생성할 때마다 배열에 담습니다.

그 배열을 가르키는 변수는
오버레이를 닫고 싶은 시점에 실행되는 함수가 접근 가능한 스코프에 있어야 합니다.

닫는 시점에 그리고 베열을 돌면서 overlay.setMap(null)을 실행시켜주면 됩니다.

7

커스텀 오버레이는

        // 커스텀 오버레이를 생성합니다
          var customOverlay = new kakao.maps.CustomOverlay({
                  position: centroid(points, sidoCd),
                  content: content,
                  clickable: true,
                  zIndex : 4
              });

이렇게 생성되는것이 아닌가요?

생성할 때 마다 배열에 담으라는 말씀이 잘 이해가 안되서 다시 문의드립니다.
저렇게 생성되는 상황에서 어떻게 담을수 있는지…
이해가 느려 죄송합니다 ㅠㅠ…

8 
var overlays = [];

function createOverlays() {
    var overlay = new kakao.maps.CustomOverlay({});
    overlays.push(overlay);
}

function removeOverlays() {
    overlays.forEach(function(overlay) {
        overlay.setMap(null);
    });
}