지도 overlay 이벤트 처리시 각각의 overlay에 접근하려면 어떻게해야 하나요?

카카오맵 API (지도/로컬)
1 
        kakao.maps.event.addListener(marker, 'click', function() {
            overlay.setMap(map);

        });
        }
        function closeOverlay() {
           overlay.setMap(null);
        }

이렇게 작성할 시 여러개의 마커, 오버레이 X 표시 클릭시 첫번째 오버레이에만 동작하고 있습니다
각각의 마커를 클릭할 때 나타나고, 사라지면 좋겠습니다. 방법 아시면 알려주세요 ㅜ
position으로 position: marker.getPosition() 했을때도 안먹어서 각각의점에 어떻게 접근할지 모르겠습니다.

혹시 오버레이도 지도를 켜자마자 출력이 되는데 혹시 출력이 없던 상태에서 클릭 하게되면 오버레이가 출력되는 방법도 아시면 알려주세요 ㅠ

2

이전 유사 게시글 답변 참고해서 content를 HTMLElement로 생성 및 이벤트 등록을 해주세요.
https://devtalk.kakao.com/t/topic/103147/2?u=lea.ju

그리고 CustomOverlay 생성 시 map 옵션을 사용하지 않으면 지도에 올라가지 않습니다.

let customOverlay = new kakao.maps.CustomOverlay({
    content: content,
    position: new kakao.maps.LatLng(33.450701, 126.570667)
});
3

Overlay 창은 뜨게 구현해놨습니다.
제가 궁금한 것은 창이 마커를 띄운 이후에 click 할 시 오버레이가 떳으면 좋겠고
오버레이 창이 마커가 뜨는 동시에 뜨지 않았으면 좋겠습니다…
혹시 아실까요?
구현이 안돼서 차라리 마커 클릭시 새로운 페이지창을 띄울까도 고민입니다…

4

음… 제가 잘못 이해하고 있는지 다시 한번 여쭤볼게요.

마커와 커스텀 오버레이를 반복문에서 여러 개 생성할 것 같은데
마커는 생성과 동시에 지도에 표시하고
커스텀 오버레이는 생성(지도에 표시되지 않은 상태)만 한 다음
마커가 클릭될 때 오버레이를 지도에 표시되게 하고 싶은 게 아니신가요?

제가 이해한 로직은 위와 같아서
커스텀 오버레이를 생성할 때 map 옵션을 설정하지 않으면
생성하고 지도에는 오버레이가 표시되지 않기 때문에 위 답변으로 가이드를 드렸는데
잘못 이해하고 있다면 다시 설명 부탁드립니다.

5

제 설명이 부족한 것 같아서 죄송합니다 ㅜㅜ 저도 처음 접해보는거라서요
우선 devexpress랑 C# 으로 html 파일 읽어와서 하는거여서 저도 처음이라 한줄 한줄 주먹구구식으로
구현하고 있습니다…
다른건 다 떠나서 지도 불러오고 난 다음 버튼 Click 할 시 InvokeScript(“setCenter”, lat, lng, contents);
이런식으로 반복문으로 위도,경도 위치 넣고 장소 이름 넣어서 출력하고 있습니다.
function setCenter()함수를 html에서 function setCenter(lat, lng, contents) { ~~ } 이런식으로 적어놨습니다.

그래서 위도,경도 넣고 장소 이름 넣어서 출력 했더니 마커와 동시에 overlay가 표시 되더라구요.
(마커 넣으면서 overlay도 동시에 넣었습니다. 그래서 마커랑 같은 위치에 overlay를 구현해놨습니다.)
제가 원하는건 마커와 동시에 overlay를 넣어서 overlay가 한번에 떠서 1) 처음부터 안뜨면 좋겠고 마우스 클릭시 떳으면 좋겠습니다.

  1. 이건 위에꺼가 해결되면 저절로 해결되는지 모르겠지만 한번에 수십개 overlay가 출력된 이후에 첫번째 마커 overlay에서만 마우스 클릭, X 버튼 클릭만 구현되어있습니다. 1,2,3,~ 여러 개의 마커와 overlay가 있으면 3번째 마커를 클릭하면 첫번째 overlay가 생되고 3번째 overlay의 X 표시를 누르면 첫번째의 overlay가 사라지는 현상이었습니다.
6
  1. 앞서 안내드린대로 커스텀 오버레이 생성 시 map 옵션을 빼고 생성해주세요.
    아마도 지금은 map 옵션을 넣은 상태로 커스텀 오버레이를 생성해서 표시되고 있는 것 같습니다.
    아래와 같이 주석으로 map옵션을 막고 확인해주세요.
let customOverlay = new kakao.maps.CustomOverlay({
//    map: map,
    content: content,
    position: position
});
  1. 다중 마커 및 오버레이 닫기 관련 문제 - lea.ju님의 글 #2 이전 유사 게시글 답변입니다.
    링크 확인해서 CustomOverlay의 content를 문자열이 아닌
    HTMLElement로 구성하고 생성한 요소에 직접 이벤트를 등록해주세요.
    그리고 링크에 작성된 코드에서 1, 2번 답변에 대한 전체 코드가 있습니다.
    확인 부탁드립니다.
7

우선 답변 감사합니다. 한번 해보고 또 답글 드리겠습니다.
감사합니다!

1개의 좋아요
8

안녕하세요. lea.ju님 말씀하신대로 하니까 대부분 해결이 됐습니다!!! 정말 감사합니다.
다만 한가지 또 문제점 해결하려다가 막혀서요…
커스텀 오버레이 닫기 버튼 appendChild() 여기서 똑같은 문제점이 발생되어서 해결해보려고 노력했는데요 ㅜ…
content.innerHTML =’<div. class=“wrap”>’+’<div. class=“info”>’ +’<div. class=“title”>’+“타이틀” +’<div. class=“close”>’+"(구현할 close 버튼 위치)"+’</div.>’ +"</div.>"+’<div. class=“img”> ~~~
이런식으로 써놨습니다. (div쓰니 인식이 안돼서 . 붙여놨습니다)
var closeBtn = document.createElement(‘button’);
closeBtn.innerHTML = ‘x’;
closeBtn.onclick = function () {
overlay.setMap(null);
};
content.appendChild(closeBtn);
이렇게 구현을 해놨는데 링크에서 보이는것처럼 wrap으로 되어있어서 저도 마커 옆에 close 버튼이 생기더라구요… ㅠ
안에다가 버튼 넣어보려고 노력해봤는데 생각처럼 쉽지가 않네요… 혹시 방법을 아실까요…

9

문자열로 선언한 content를 document.createElement를 이용해서 구성하거나
closeBtn을 생성한 뒤 content 요소에 접근해서 title 클래스 명을 가진 요소를 찾아 그 하위에 appendChild 해주세요.