AJAX로 검색을 해서 나오는 데이터들을 지도로 뿌려주는 것은 성공을 했습니다.
이제 검색 내용이 바뀔 때마다 원래 있던 마커를 지우고 다시 생성을 해야하는데요
이것을 참고해서 넣으면 되겠지 라고 생각했는데
addressSearch 함수의 결과를 전역변수에 담고 싶습니다
이 글에서 말씀하신 것 처럼 AJAX에서 전역변수에 담는 일이 쉽지가 않습니다.
이 예제도 ajax 안에서는 실패했습니다.
promise, async/await 를 써서라도 해결하고 싶은데 예제가 없어서 막막한 상황입니다.
어떤식으로 해결해야 할까요?
- 소스코드
function getData() {
var formData = $('form').serializeObject();
delete formData['_csrf'];
// 성별, 편의시설 하나만 선택할때 스트링으로 들어가는 것을 배열로 변경
if (typeof formData.gender == 'string') {
formData.gender = [formData.gender];
}
if (typeof formData.facilities == 'string') {
formData.facilities = [formData.facilities];
}
$.ajax({
url: '/searchgehainfo',
type: 'post',
contentType: 'application/json; charset=utf8',
data: JSON.stringify(formData),
dataType: 'json',
beforeSend: function () {
$('.wrap-loading').addClass('loader');
},
complete: function () {
$('.wrap-loading').removeClass('loader');
$('.wrap-loading').hide();
}
})
.done(function (data) {
// handlebars 템플릿 주입
var source = $('#template').html();
var template = Handlebars.compile(source);
$('#searchresult').html(template(data));
})
.done(function (data) {
// 마커 & 오버레이
var geocoder = new daum.maps.services.Geocoder();
var markers = [];
// console.log(mapContainer);
data.forEach(function (x, i) {
geocoder.addressSearch(data[i].address, function (result, status) {
if (status === daum.maps.services.Status.OK) {
// markers가 하나라도 있으면
// hide 하고 show
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
// 마커를 생성하고 배열에 삽입 (지도위에 표시 x)
var marker = new daum.maps.Marker({
position: coords
});
markers.push(marker);
// 배열에 추가된 마커들을 지도에 표시하거나 삭제하는 함수
function showMarkers() {
for (var i = 0, len = markers.length ; i < len; i++) {
markers[i].setMap(map);
}
}
showMarkers();
var customContent = document.createElement('div');
customContent.className = 'wrap';
var info = document.createElement('div');
info.className = 'info';
var contentTitle = document.createElement('div');
contentTitle.className = 'title';
contentTitle.textContent = data[i].guestHouseName;
var closeBtn = document.createElement('div');
closeBtn.className = 'close';
closeBtn.title = '닫기';
closeBtn.addEventListener("click", function(){
CustomOverlay.setMap(null)
});
var contentBody = document.createElement('div');
contentBody.className = 'body';
var imgDiv = document.createElement('div');
imgDiv.className = 'img';
var imgTag = document.createElement('img');
imgTag.src = data[i].originalName;
imgTag.width = 73;
imgTag.height = 70;
var contentDesc = document.createElement('div');
contentDesc.className = 'desc';
var ellipsis = document.createElement('div');
ellipsis.className = 'ellipsis';
ellipsis.textContent = data[i].address;
var aDiv = document.createElement('div');
var aTag = document.createElement('a');
aTag.href = 'http://www.kakaocorp.com/main';
aTag.target = '_blank';
aTag.className = 'link';
aTag.textContent = '홈페이지';
customContent.appendChild(info);
info.appendChild(contentTitle);
contentTitle.appendChild(closeBtn);
closeBtn.appendChild(contentBody);
info.appendChild(contentBody);
contentBody.appendChild(imgDiv);
imgDiv.appendChild(imgTag);
contentBody.appendChild(contentDesc);
contentDesc.appendChild(ellipsis);
contentDesc.appendChild(aDiv);
aDiv.appendChild(aTag);
var CustomOverlay = new daum.maps.CustomOverlay({
map: map,
zIndex: 3,
position: marker.getPosition()
});
daum.maps.event.addListener(marker, 'click', function() {
CustomOverlay.setMap(map);
CustomOverlay.setContent(customContent);
});
function closeOverlay() {
CustomOverlay.setMap(null);
CustomOverlay.setContent(null);
}
} // if status ok end
}); // geocoder address search end
}); // forEach end
})
.fail(function () {
alert('failed');
}); // ajax end
} // function getData end
