안녕하세요
현재 지도에 "닫기가 가능한 커스텀오버레이"를 넣고싶은데 가이드좀 부탁드립니다.
미리 지정된 양식 사용은 4개의 띄어쓰기로 들여쓰세요.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie-edge">
<title>지도만들기</title>
</head>
<body>
<div id="map" style="width:100%;height:100vh;"></div>
<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=key=clusterer"></script>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.566550, 126.965444), // 지도의 중심좌표
level: 4, // 지도의 확대 레벨
mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
};
// 지도를 생성한다
var map = new kakao.maps.Map(mapContainer, mapOption);
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
var 데이터 = [
[37.566550, 126.965444,'<div style="padding: 5px">내용</div>'],
[37.566108, 126.965893,'<div style="padding: 5px">내용1</div>'],
[37.567133, 126.967438,'<div style="padding: 5px">내용2</div>']
]
var markers = [];
for (var i=0; i < 데이터.length; i++) {
// 지도에 마커를 생성하고 표시한다
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(데이터[i][0], 데이터[i][1]), // 마커의 좌표
map: map // 마커를 표시할 지도 객체
});
// 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content : 데이터[i][2]
});
// 마커 위에 인포윈도우를 표시합니다. 두번째 파라미터인 marker를 넣어주지 않으면 지도 위에 표시됩니다
// 새로고침 후 인포윈도를 기본으로 보여주고자 할때 >> 해당 구문 infowindow.open(map, marker);
markers.push(marker);
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수입니다
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}
</script>
</body>
</html>