지도에 마커를 여러개 만들어서 각각에 커스텀 오버레이를 작성하려고 했습니다
그랬더니 닫기버튼이 먹히지 않아서 질문드립니다
유사한 질문들이 있길래 참고했더니
‘문자열이 아닌 DOM API로 Element를 직접 생성하여 구성하는게
이 후에 컨트롤하기 쉬우며 실수가 적어집니다.’ 이런 답변이 있는 것을 확인했고 그렇게 작성했으나
그래도 닫기버튼이 동작하지 않아서 질문드립니다.그리고 지도를 켰을때 커스텀 오버레이들이 펼쳐져있는데
지도를 켰을때 이것들이 닫혀져 있고 제가 클릭했을때 열리게 할 수 없을까요?
1.닫기버튼이 안됩니다
2.커스텀 오버레이들의 디폴트가 펼쳐져있는게 아닌 접혀있는 상태였으면 좋겠습니다
<meta charset="utf-8">
<title>닫기가 가능한 커스텀 오버레이</title>
<style>
.wrap {
position: absolute;
left: 0;
bottom: 40px;
width: 288px;
height: 132px;
margin-left: -144px;
text-align: left;
overflow: hidden;
font-size: 12px;
font-family: 'Malgun Gothic', dotum, '돋움', sans-serif;
line-height: 1.5;
}
.wrap * {
padding: 0;
margin: 0;
}
.wrap .info {
width: 286px;
height: 120px;
border-radius: 5px;
border-bottom: 2px solid #ccc;
border-right: 1px solid #ccc;
overflow: hidden;
background: #fff;
}
.wrap .info:nth-child(1) {
border: 0;
box-shadow: 0px 1px 2px #888;
}
.info .title {
padding: 5px 0 0 10px;
height: 30px;
background: #eee;
border-bottom: 1px solid #ddd;
font-size: 18px;
font-weight: bold;
}
.info .close {
position: absolute;
top: 10px;
right: 10px;
color: #888;
width: 17px;
height: 17px;
background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/overlay_close.png');
}
.info .close:hover {
cursor: pointer;
}
.info .body {
position: relative;
overflow: hidden;
}
.info .desc {
position: relative;
margin: 13px 0 0 90px;
height: 75px;
}
.desc .ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.desc .jibun {
font-size: 11px;
color: #888;
margin-top: -2px;
}
.info .img {
position: absolute;
top: 6px;
left: 5px;
width: 73px;
height: 71px;
border: 1px solid #ddd;
color: #888;
overflow: hidden;
}
.info:after {
content: '';
position: absolute;
margin-left: -12px;
left: 50%;
bottom: 0;
width: 22px;
height: 12px;
background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')
}
.info .link {
color: #5085BB;
}
</style>
<div id="map" style="width:100%;height:350px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey= 키값키값키값"></script>
<script type="module">
import { item } from "./electinfo.js";
var mapContainer = document.getElementById('map'), // 지도의 중심좌표
mapOption = {
center: new kakao.maps.LatLng(37.532511, 126.982533), // 지도의 중심좌표
level: 8 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 지도에 마커를 표시합니다
for(let i=0;i<10;i++){
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(item[i].lat, item[i].lng)
});
// 커스텀 오버레이에 표시할 컨텐츠 입니다
// 커스텀 오버레이는 아래와 같이 사용자가 자유롭게 컨텐츠를 구성하고 이벤트를 제어할 수 있기 때문에
// 별도의 이벤트 메소드를 제공하지 않습니다
var content = document.createElement('div');
content.setAttribute("class","wrap")
var div2=document.createElement('div')
div2.setAttribute("class","info");
content.append(div2);
var div3=document.createElement('div');
div3.setAttribute("class","title");
div3.innerHTML=item[i].statnm;
div2.append(div3);
var div4=document.createElement('div');
div4.setAttribute("class","close");
// div4.setAttribute("onclick","closeOverlay()")
// div4.setAttribute("title","닫기");
var closeBtn = document.createElement('button');
closeBtn.appendChild(document.createTextNode('닫기'));
closeBtn.onclick = function() { customOverlay.setMap(null); };
div3.append(closeBtn);
var div5=document.createElement('div');
div5.setAttribute("class","body");
div2.append(div5);
var div6=document.createElement('div');
div6.setAttribute("class","desc")
div5.append(div6);
var div7=document.createElement('div');
div7.innerHTML=item[i].addr;
div6.append(div7);
var div8=document.createElement('div');
div8.innerHTML=item[i].usetime;
div6.append(div8);
// 마커 위에 커스텀오버레이를 표시합니다
// 마커를 중심으로 커스텀 오버레이를 표시하기위해 CSS를 이용해 위치를 설정했습니다
var overlay = new kakao.maps.CustomOverlay({
content: content,
map: map,
position: marker.getPosition()
});
// 마커를 클릭했을 때 커스텀 오버레이를 표시합니다
kakao.maps.event.addListener(marker, 'click', function () {
overlay.setMap(map);
});
// 커스텀 오버레이를 닫기 위해 호출되는 함수입니다
function closeOverlay() {
overlay.setMap(null);
}
}
</script>