다중 오버레이에서 다른 오버레이 클릭시 이전 오버레이 닫기 관련 문의

카카오맵 API (지도/로컬)
1 
	multiOverlay : function(address, title = "", url = "", address2 = "")
	{
		var geocoder = new daum.maps.services.Geocoder();

		address.forEach(function(addr, index)
		{
			// 주소로 좌표를 검색합니다
			geocoder.addressSearch(addr, function(result, status) {						
				if (status === daum.maps.services.Status.OK) {
					//console.log(index);

					// 정상적으로 검색이 완료됐으면 
					if (status === daum.maps.services.Status.OK) {			

						var coords = new daum.maps.LatLng(result[0].y, result[0].x);

						var marker = new daum.maps.Marker({
							map: map,
							position: coords
							//image : markerImage // 마커 이미지
						});

						// 마커 위에 커스텀오버레이를 표시합니다
						// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
						var CustomOverlay = new daum.maps.CustomOverlay({
							//content: content,
							map: map,
							position: marker.getPosition()
						});
						

						//마커 위에 커스텀오버레이 콘텐츠 Dom으로 구현 시작
						var Customcontent = document.createElement('div');
						Customcontent.className = "wrap";

						var info = document.createElement('div');
						info.className = "info"			
						Customcontent.appendChild(info);

						//커스텀오버레이 타이틀
						var contentTitle = document.createElement("div");
						contentTitle.className = "title"
						contentTitle.appendChild(document.createTextNode(title[index]));
						info.appendChild(contentTitle);

						//커스텀오버레이 닫기 버튼
						var closeBtn = document.createElement("div");
						closeBtn.className = "close";
						closeBtn.setAttribute("title","닫기");
						closeBtn.onclick = function() { CustomOverlay.setMap(null); };
						contentTitle.appendChild(closeBtn);

						var bodyContent = document.createElement("div");
						bodyContent.className = "body";
						info.appendChild(bodyContent);

						var imgDiv = document.createElement("div");
						imgDiv.className = "img";
						bodyContent.appendChild(imgDiv);

						//커스텀오버레이 이미지
						var imgContent = document.createElement("img");
						imgContent.setAttribute("src", "http://cfile181.uf.daum.net/image/250649365602043421936D");
						imgContent.setAttribute("width", "73");
						imgContent.setAttribute("heigth", "70");
						imgDiv.appendChild(imgContent);

						var descContent = document.createElement("div");
						descContent.className = "desc"
						bodyContent.appendChild(descContent);

						//커스텀오버레이 주소			
						var addressContent = document.createElement("div");
						addressContent.className = "ellipsis";
						addressContent.appendChild(document.createTextNode(result[0].address_name));
						descContent.appendChild(addressContent);

						//커스텀오버레이 지번주소
						var address2Content = document.createElement("div");
						address2Content.className = "jibun ellipsis";
						address2Content.appendChild(document.createTextNode(address2));
						descContent.appendChild(address2Content);

						var LinkDiv = document.createElement("div");
						descContent.appendChild(LinkDiv);

						//커스텀오버레이 링크
						var LinkContent = document.createElement("a");
						if (url == "")
						{
							url = "javascript:"
						}
						LinkContent.setAttribute("href", url);
						if (url != "javascript:")
						{
							LinkContent.setAttribute("target", "_blank");
						}
						LinkContent.className = "link";
						LinkContent.appendChild(document.createTextNode("홈페이지"));
						LinkDiv.appendChild(LinkContent);
						//마커 위에 커스텀오버레이 콘텐츠 Dom으로 구현 끝

						CustomOverlay.setContent(Customcontent);


						var testOverlay = null;
						// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
						daum.maps.event.addListener(marker, 'click', function() {

							//CustomOverlay.setMap(null);
							//console.log(marker.getPosition());
							//CustomOverlay.setPosition(marker.getPosition());

							//testOverlay = CustomOverlay;

							CustomOverlay.setMap(map);
							


							//Maps.CustomOverlayClick(testOverlay, map);
						});					
						
						// 인포윈도우로 장소에 대한 설명을 표시합니다
						//var infowindow = new daum.maps.InfoWindow({
						//	content: '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
						//});
						//infowindow.open(map, marker);

						CustomOverlay.setMap(null);
						

					}
					else if (status == "ZERO_RESULT")
					{
						alert("없는 주소 입니다.")
						jQuery("#map").hide();
						return false;
					}

				}
			});				
		});

	}

위의 내용으로 진행시 클릭시 오버레이 노출 함수를 daum.maps.event.addListener 이거를 사용하는데

다른거 클릭시 기존 오버레이를 닫고 새롭게 노출하고 시픈데, 기존오버레이를 어떻게 닫아야할지 문의 드려봅니다.

2

두가지 방법이 있습니다.

  1. CustomOverlay를 전역으로 하나만 만드시고
    클릭할 때마다 setPosition()로 위치를, setContent()로 내용을 바꿔치는 방식

  2. 전역 변수를 하나 두시고
    클릭할 때마다 이 변수에 할당되어 있는 CustomOverlay를 setMap(null) 하고 현재 클릭된 CustomOverlay를 해당 변수에 재할당하여 계속하여 이 전 CustomOverlay를 지우는 방식

무엇을 구현하시느냐에 따라 사용해야 할 방법이 다른데
뭐… 간단하게 두 번째껄로 간다고 하면

// global variable
var clickedOverlay = null;

geocoder.addressSearch(addr, function(result, status) {
  /*
  ...
  ...
  ...
  */
  var CustomOverlay = new daum.maps.CustomOverlay({
    //content: content,
    map: map,
    position: marker.getPosition()
  });
  /*
  ...
  ...
  ...
  */
  daum.maps.event.addListener(marker, 'click', function() {
    if (clickedOverlay) {
        clickedOverlay.setMap(null);
    }
    CustomOverlay.setMap(map);
    clickedOverlay = CustomOverlay;
  });
  /*
  ...
  ...
  ...
  */
});
4개의 좋아요
3

와 이거 처음에 이해 못했는데 약 2주만에 다시보니까 이해했습니다.

구현 완료입니다 감사합니다!!