data.forEach((item, idx) => {
let marker = new kakao.maps.Marker({
map: ls.value.mapWaiting, // 마커를 표시할 지도
position: new kakao.maps.LatLng(item.LATITUDE, item.LONGTITUDE), // 마커를 표시할 위치
// title : item.title // 마커의 타이틀, 마커에 마우스를 올리면 타이틀이 표시됩니다
});
linePath.push(new kakao.maps.LatLng(item.LATITUDE, item.LONGTITUDE))
// let content = document.createElement('div');
// content.className = 'wrap';
// content.innerHTML = `
// <div class="info">
// <div class="title">
// <div> </div>
// <div class="close" onclick="closeOverlay()" title="닫기"></div>
// </div>
// <div class="body">
// <div class="desc">
// <div class="ellipsis">이름 : ${item.DS_NAME}</div>
// <div class="ellipsis">사번 : ${item.ID_USER}</div>
// <div class="ellipsis">휴대폰 번호 : ${item.NO_TEL1}</div>
// </div>
// </div>
// </div>
// `;
let content = document.createElement('div');
content.className = 'wrap';
// info 요소 생성 및 추가
let info = document.createElement('div');
info.className = 'info';
// title 요소 생성 및 추가
let title = document.createElement('div');
title.className = 'title';
let emptyDiv = document.createElement('div');
title.appendChild(emptyDiv);
// 닫기 버튼 생성 및 추가
let closeBtn = document.createElement('div');
closeBtn.className = 'close';
closeBtn.title = '닫기';
closeBtn.onclick = function() {
overlay.setMap(null);
};
title.appendChild(closeBtn);
info.appendChild(title);
// body 요소 생성 및 추가
let body = document.createElement('div');
body.className = 'body';
// desc 요소 생성 및 추가
let desc = document.createElement('div');
desc.className = 'desc';
let name = document.createElement('div');
name.className = 'ellipsis';
name.appendChild(document.createTextNode(`이름 : ${item.DS_NAME}`));
desc.appendChild(name);
let userId = document.createElement('div');
userId.className = 'ellipsis';
userId.appendChild(document.createTextNode(`사번 : ${item.ID_USER}`));
desc.appendChild(userId);
let phone = document.createElement('div');
phone.className = 'ellipsis';
phone.appendChild(document.createTextNode(`휴대폰 번호 : ${item.NO_TEL1}`));
desc.appendChild(phone);
body.appendChild(desc);
info.appendChild(body);
content.appendChild(info);
let overlay = new kakao.maps.CustomOverlay({
content: content,
position: marker.getPosition(),
map: ls.value.mapWaiting,
});
// var moveLatLon = new kakao.maps.LatLng(item.LATITUDE, item.LONGTITUDE);
// 지도 중심을 이동 시킵니다
// ls.value.mapWaiting.setCenter(moveLatLon);
ls.value.markers.push(marker)
ls.value.overlays.push(overlay)
kakao.maps.event.addListener(marker, 'click', function() {
// if(ls.value.popup) {
// ls.value.popup.setMap(null); // 기존 오버레이 닫기
// ls.value.popup = null
// }
overlay.setMap(ls.value.mapWaiting);
ls.value.popup = overlay; // 현재 오버레이 저장
});
})
안녕하세요 카카오 맵 API 사용중 질문이 있습니다.
초기에 map: ls.value.mapWaiting 으로 설정한 오버레이는 정상적으로 뜨고 닫기까지 정상 동작하는데
오버레이를 닫은 후 다시 마커를 누르면 오버레이 표시가 안됩니다.(click이벤트는 동작함)
// if(ls.value.popup) {
// ls.value.popup.setMap(null); // 기존 오버레이 닫기
// ls.value.popup = null
// } << 이 주석을 풀고 마커를 두번 클릭하면 오버레이가 표시되는데 이렇게 되는 원인을 알 수 있을까요 …
도저히 혼자 해결을 못해 문의드립니다 …