안녕하세요.
마커를 여러개 표시하고 마크별 커스텀 오버레이를 표시하게 구현하고,
content 에 넣은 html 내의 닫기 버튼을 클릭해서 커스텀 오버레이를 닫도록 구현하는 방법에 문의 드립니다.
닫기가 가능한 커스텀 오버레이 샘플의 소스를 적용해도 실행이 안되어 문의 드립니다.
다중 마커 커스텀 오버레이는 작업은 아래와 같습니다.
for (var i = 0; i < positions.length; i ++) {
// 마커등 표시 내용 생략
var content = '<div>';
content += '<span>' + positions[i].content + '</span>';
content += '<button type="button" onclick="">닫기</button>';
content += '</div>';
customOverlay = new daum.maps.CustomOverlay({
position: latlng,
content: content
});
customOverlay.setMap(map);
}
문자열이 아닌 DOM API로 Element를 직접 생성하여 구성하는게
이 후에 컨트롤하기 쉬우며 실수가 적어집니다.
for( ; ; ) 문은 es6를 사용하지 않는 이상 변수가 스코프를 유지하지 못하므로
함수(IIFE)로 스코프를 만들어 주거나 forEach로 대체하는 것이 좋습니다.
positions.forEach(function(pos) {
// 중략
var customOverlay = new daum.maps.CustomOverlay({
position: latlng
});
var content = document.createElement('div');
var info = document.createElement('span');
info.appendChild(document.createTextNode(pos.content));
content.appendChild(info);
var closeBtn = document.createElement('button');
closeBtn.appendChild(document.createTextNode('닫기'));
closeBtn.onclick = function() { customOverlay.setMap(null); };
content.appendChild(closeBtn);
customOverlay.setContent(content);
customOverlay.setMap(map);
});
1개의 좋아요
