사용자 편의성을 높히기 위해서 커스텀 오버레이의 닫기 버튼을 클릭했을 때 이외에
맵의 아무 곳이나 클릭했을 경우에도 오버레이가 닫히도록 하는 코드를 추가했습니다.
하지만 이때 오버레이 안에 있는 a 링크는 동작을 해야하는데요
(사진의 게스트하우스 정보 보기 부분)
실제로는 이 때도 map의 click 이벤트가 우선되어서 오버레이가 닫아지게 됩니다.
커스텀오버레이의 a 링크 (혹은 click 이벤트) 를 map의 이벤트보다 우선할 수 있도록
변경하는 것이 가능한가요??
- 소스코드
// 전역
daum.maps.event.addListener(map, 'click', function () {
//console.log('map clicked');
// 추가한 부분
if (clickedOverlay){
clickedOverlay.setMap(null);
}
setZoomable(true);
});
function getData() {
// 생략
$.ajax({
// 생략
})
.done(function (data) {
overlays.forEach(function (overlay) { overlay.setMap(null); });
overlays.length = 0 // 오버레이 배열 초기화
var geocoder = new daum.maps.services.Geocoder();
var bounds = new daum.maps.LatLngBounds();
data.forEach(function (x, i) {
geocoder.addressSearch(data[i].address, function (result, status) {
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
//생략
var aDiv = document.createElement('div');
var aTag = document.createElement('a');
aTag.href = '/room/roomInfo?guestHouseCode='+data[i].guestHouseCode;
// aTag.addEventListener('click', function(){
// console.log(this);
// });
// 생략
var CustomOverlay = new daum.maps.CustomOverlay({
map: map,
zIndex: 3,
position: marker.getPosition()
});
daum.maps.event.addListener(marker, 'click', function() {
if (clickedOverlay){
clickedOverlay.setMap(null);
}
CustomOverlay.setMap(map);
CustomOverlay.setContent(customContent);
clickedOverlay = CustomOverlay;
});
overlays.push(CustomOverlay);
} // if status ok end
}); // geocoder address search end
}); // forEach end
})
} // function getData end