여러 개의 마커 각각에 오버레이를 주고 싶은데 찾아보니 클로저라는 것이 있더라구요
클로저를 설정하지 않으면 마지막 마커에만 오버레이가 등록된다고 하여 클로저를 해보려 햇지만 실력이 부족하여 잘 모르겠네요…ㅠㅠ
밑의 코드는 제가 만든 오버레이를 설정하는 코드 입니다.
koreafoodMarkers는 마커를 가지고 있는 배열이고, q01[][]은 상가 정보를 가지고 있는 이중배열입니다.
for(var i = 0;i<koreafoodMarkers.length;i++)
{
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' '+q01[0][i] +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="http://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">'+q01[8][i]+' </div>' +
' <div class="jibun ellipsis">'+q01[3][i]+'</div>' +
' <div>'+q01[5][i]+'</div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
var overlay = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: koreafoodMarkers[i].getPosition()
});
overlay.setMap(null);
kakao.maps.event.addListener(koreafoodMarkers[i], 'click', function() {
overlay.setMap(map);
});
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
overlay.setMap(null);
}
}
클로저를 어떻게 하는 지 도움 부탁드립니다.
for문 말고 Array.forEach를 사용하세요.
해당 반복문에서 클로저의 개념까지 알아가며 작성할 필요는 없습니다.
오! 감사합니다! 이제는 다 생성은 되는데 안 닫아져요!
var count = 0;
koreafoodMarkers.forEach(function(element){
var content = '<div class="wrap">' +
' <div class="info">' +
' <div class="title">' +
' '+q01[0][count] +
' <div class="close" onclick="closeOverlay()" title="닫기"></div>' +
' </div>' +
' <div class="body">' +
' <div class="img">' +
' <img src="http://cfile181.uf.daum.net/image/250649365602043421936D" width="73" height="70">' +
' </div>' +
' <div class="desc">' +
' <div class="ellipsis">'+q01[8][count]+' </div>' +
' <div class="jibun ellipsis">'+q01[3][count]+'</div>' +
' <div>'+q01[5][count]+'</div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>';
var overlay = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: element.getPosition()
});
console.log(overlay);
overlay.setMap(null);
kakao.maps.event.addListener(element, 'click', function() {
overlay.setMap(map);
});
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
overlay.setMap(null);
}
count++;
});
어떻게 하면 될까요!
오오오오!!!
감사합니다!! 3개월 차 학생한테 큰 도움이 되었습니다!
감사합니다!
학생이신 줄 알았다면 생각 할 기회를 더 드리는게 맞았을텐데… 흠…
일단 말씀하신, "마지막 마커에만 이벤트가 등록된다"는 사실이 아닐거고요.
문제는 다른 곳에 있습니다.
어떤 마커를 클릭하더라도 항상 마지막 오버레이만 뜰거란 거죠.
제가 드린 해법은 클로저가 아니라
함수 스코프를 가지는 자바스크립트의 특성을 이용하여 해결한다고 보는게 맞습니다.
만약 클로저를 이용하여 해결한다면,
kakao.maps.event.addListener(koreafoodMarkers[i], 'click', function(o) {
return function() {
o.setMap(map);
};
}(overlay));
이렇게 될 겁니다.
이벤트는 등록한 시점과는 전혀 다른, 마커를 클릭할 때 발생할 겁니다.
이 시점에서 실행되는 함수가 잘못된 변수 혹은 객체를 바라보지 않도록 해 주는게 핵심입니다.
이것을 클로저 기법으로 캡쳐(capture) 혹은 바인딩(binding) 할 수 있는거고요.
이벤트 핸들러가 실행하는 내부 함수는 overlay가 스코프에 갇혀(closure) 버렸기 때문에 정상 동작합니다.
클로저는 프로그래밍 언어 특성에 기인한 하나의 기법이며
OOP에서 언급한 캡슐화와 유사한 효과를 볼 수 있습니다.
자바스크립트를 좀 더 진지하게 배우고 싶다면 반드시 공부하셔야 할 내용이기도 합니다.
구글링만 해도 정보는 많이 나오니, 한 번 짚고 넘어가 보세요.
그리고 더 나아가 ES6 let, const 로 해결하는 방법도 있습니다. 확인해 보세요.
$(document).on(‘click’,".close", function(e) {
overlay.setMap();
);
