안녕하세요 초보개발자입니다.
커스텀오버레이 관련 여쭤보고싶어서 글남깁니다!
예제를 보면 보통
생성할때는 setMap(map); 을 쓰고
지울때는 setMap(null); 을 사용하던데
제가 지금 개발하고있는게
마커를 가지고 처음 클릭했을때 커스텀오버레이가 열리고 한번더 클릭했을때 닫히는 것과(계속반복이고 이건 잘됌.)
, 버튼을 가지고 커스텀오버레이를 닫는것(이게안됌) 을 구현하고있습니다.
코드는 아래와 같습니다.
//커스텀오버레이의 컨텐츠영역
var contents = "<div class="popup_wrap popup_map" id="popup_map" style="display: block;">";
contents += "<button type="button" class="map_x" onclick="closeOverlay()">커스텀오버레이 닫기</button>";
contents += "</div>";
//커스텀오버레이 생성
var customOverlay = new kakao.maps.CustomOverlay({
content: contents,
position: new kakao.maps.LatLng(arrLat[j],arrLng[j])
});
//마커 클릭시 클릭한마커에 커스텀오버레이 생성
kakao.maps.event.addListener(marker, 'click', makeOverListener(map, marker, customOverlay));
// 커스텀오버레이를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, customOverlay) {
return function() {
var test1 = $("#popup_map").length;
if(test1 == 0){
customOverlay.setMap(map); // 마커 처음 클릭시 커스텀오버레이 맵에 띄우는애
} else{
customOverlay.setMap(null); // 마커를 한번더 클릭시 커스텀오버레이 지우는애
}
};
}
// 커스텀 오버레이를 onclick 으로닫기 위해 호출되는 함수입니다
function closeOverlay() {
$("#popup_map").remove();
}
이렇게 코드를 짜놨습니다.
근데 onclick 에 있는 closeOverlay()는 customOverlay 를 받아오지 못해서 setMap(null) 을 할수가 없어서,
그냥 div의 id를 remove 시켰더니 커스텀오버레이가 삭제되기만하고, 다시 setMap(map) 이 먹지않습니다.
어떻게해야 좋을까요
조언좀 주시면 감사하겠습니다 정말로 ㅠㅠㅠ
===
결론 : 버튼눌러서 remove 를 시킨 후 다시 마커클릭시 setMap(map)이 안먹음