http://apis.map.daum.net/web/sample/customOverlay1/
"직접해보기"에서 끼워 맞추기로 아래 코드를 만드니까 되긴 하는데 이렇게 써도 괜찮을지 확인 부탁드립니다.
마크는 최대 4000~5000개 가량이 한 지도에 들어 갈 수도 있어야 합니다…
HTML + JS
<div id="map" style="width:100%;height:100%;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(35.1584, 128.117), // 지도의 중심좌표
level: 2 // 지도의 확대 레벨
};
var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 지도를 재설정할 범위정보를 가지고 있을 LatLngBounds 객체를 생성합니다
var bounds = new daum.maps.LatLngBounds();
// 커스텀 오버레이가 표시될 위치입니다
var positions = [ // 마커의 위치
new daum.maps.LatLng(36.1584, 128.117),
new daum.maps.LatLng(36.1594, 128.117),
new daum.maps.LatLng(36.1594, 128.118),
new daum.maps.LatLng(36.1584, 128.118),
new daum.maps.LatLng(36.157, 128.118),
new daum.maps.LatLng(36.156, 128.118),
new daum.maps.LatLng(36.155, 128.118),
new daum.maps.LatLng(36.154, 128.118),
new daum.maps.LatLng(36.153, 128.118),
new daum.maps.LatLng(36.152, 128.118),
new daum.maps.LatLng(36.151, 128.118),
new daum.maps.LatLng(36.150, 128.118)
],
selected = null;
var test_number = [ 1, 2, 8, 10, 22, 33, 333, 123, 888, 999, 1234, 2345, 18888];
var imageSrc = 'https://blogfiles.pstatic.net/MjAxOTAzMjhfMjA2/MDAxNTUzNzM2MDUwOTA3.HcYbVCg_7k31ZGrN7E4uX97Nvort4BQbOk2RRV4_wYUg.acj8f5XmWuE1B-apVIBZ6k7HoX546fb6Tb_pWF4hsF0g.PNG/marker_t.png', // 마커이미지의 주소입니다
imageSize = new daum.maps.Size(40, 42), // 마커이미지의 크기입니다
imageOption = {offset: new daum.maps.Point(13, 40)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption);
// 지도 위에 마커를 표시합니다
for (var i = 0, len = positions.length; i < len; i++) {
// 커스텀 오버레이를 생성합니다
var customOverlay = new daum.maps.CustomOverlay({
position: positions[i],
zIndex: i*2,
});
if(!!test_number[i] && (test_number[i] < 10))
customOverlay.setContent('<div class ="label"><span class="d1">'+ test_number[i] +'</span></div>');
else if(test_number[i] < 100)
customOverlay.setContent('<div class ="label"><span class="d2">'+ test_number[i] +'</span></div>');
else if(test_number[i] < 1000)
customOverlay.setContent('<div class ="label"><span class="d3">'+ test_number[i] +'</span></div>');
else
customOverlay.setContent('<div class ="label"><span class="d4">'+ test_number[i] +'</span></div>');
// 커스텀 오버레이를 지도에 표시합니다
customOverlay.setMap(map);
var marker = new daum.maps.Marker({
map: map, // 마커를 표시할 지도
position: positions[i],
image: markerImage,
zIndex: i*2+1,
clickable: true // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
});
// 인포윈도우를 생성합니다
var infowindow = new daum.maps.InfoWindow({
position : positions[i],
content : '<div style="padding:5px;">[number:<b>' + (i+1) + '</b>...]</div>',
zIndex: 100,
removable : true
});
// infowindow.open(map, marker);
daum.maps.event.addListener(marker, 'click', addListener(map, marker, infowindow, i));//, customOverlay));
bounds.extend(positions[i]);
}
map.setBounds(bounds);
// 인포윈도우를 표시하는 클로저를 만드는 함수입니다
function addListener(map, marker, infowindow, i){//, customOverlay) {
return function() {
// customOverlay.setMap(null);
if(!selected || selected !== infowindow) {
!!selected && selected.close();
}
infowindow.open(map, marker);
selected = infowindow;
};
}
</script>
CSS
.label {margin-bottom: 55px;}
.label * {display: inline-block;vertical-align: top;}
.label .d1 {background: url(https://blogfiles.pstatic.net/MjAxOTAzMjhfMTYy/MDAxNTUzNzM4MDkyNTI5.nK4eTOQi0JZZcqfayBLHOMuugF-y8ZWmB-A_WV9qw44g.MRWgcXJ0uwexFfQ2LvJz-vx_-h85HGN8ZM9sS-Jy97Ag.PNG/marker_c.png);
text-align:center; margin-left:0px; padding:0px 6px; font-size: 15px; font-weight: bold; line-height: 22px;}
.label .d2 {background: url(https://blogfiles.pstatic.net/MjAxOTAzMjhfMTYy/MDAxNTUzNzM4MDkyNTI5.nK4eTOQi0JZZcqfayBLHOMuugF-y8ZWmB-A_WV9qw44g.MRWgcXJ0uwexFfQ2LvJz-vx_-h85HGN8ZM9sS-Jy97Ag.PNG/marker_c.png);
text-align:center; margin-left:0px; padding:0px 4px; font-size: 13px; font-weight: bold; line-height: 22px;}
.label .d3 {background: url(https://blogfiles.pstatic.net/MjAxOTAzMjhfMTYy/MDAxNTUzNzM4MDkyNTI5.nK4eTOQi0JZZcqfayBLHOMuugF-y8ZWmB-A_WV9qw44g.MRWgcXJ0uwexFfQ2LvJz-vx_-h85HGN8ZM9sS-Jy97Ag.PNG/marker_c.png);
text-align:center; margin-left:0px; padding:0px 2px; font-size:10px; font-weight: bold; line-height: 22px;}
.label .d4 {background: url(https://blogfiles.pstatic.net/MjAxOTAzMjhfMTYy/MDAxNTUzNzM4MDkyNTI5.nK4eTOQi0JZZcqfayBLHOMuugF-y8ZWmB-A_WV9qw44g.MRWgcXJ0uwexFfQ2LvJz-vx_-h85HGN8ZM9sS-Jy97Ag.PNG/marker_c.png);
text-align:center; margin-left:0px; padding:0px 0px; font-size: 10px; line-height: 22px;}