<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new daum.maps.LatLng(37.566826, 126.978656), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
// 지도를 표시할 div와 지도 옵션으로 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
// 커스텀 오버레이 엘리먼트를 만들고, 컨텐츠를 추가합니다
var content = document.createElement('div');
content.className = 'overlay';
content.innerHTML = '드래그 해주세요 :D';
// 커스텀 오버레이를 생성합니다
var customoverlay = new daum.maps.CustomOverlay({
map: map,
content: content,
position: new daum.maps.LatLng(37.566826, 126.978656)
});
// 마커 클러스터러를 생성합니다
var clusterer = new daum.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 10 // 클러스터 할 최소 지도 레벨
});
// 데이터를 가져오기 위해 jQuery를 사용합니다
// 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
$.get("/download/web/data/chicken.json", function(data) {
// 데이터에서 좌표 값을 가지고 마커를 표시합니다
// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
var markers = $(data.positions).map(function(i, position) {
return new daum.maps.Marker({
position : new daum.maps.LatLng(position.lat, position.lng)
});
});
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
});
// 커스텀 오버레이를 드래그 하기 위해 필요한
// 드래그 시작좌표, 커스텀 오버레이의 위치좌표를 넣을 변수를 선업합니다
var startX, startY, startOverlayPoint;
// 커스텀 오버레이에 mousedown이벤트를 등록합니다
addEventHandle(content, 'mousedown', onMouseDown);
// mouseup 이벤트가 일어났을때 mousemove 이벤트를 제거하기 위해
// document에 mouseup 이벤트를 등록합니다
addEventHandle(document, 'mouseup', onMouseUp);
// 커스텀 오버레이에 mousedown 했을 때 호출되는 핸들러 입니다
function onMouseDown(e) {
// 커스텀 오버레이를 드래그 할 때, 내부 텍스트가 영역 선택되는 현상을 막아줍니다.
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
var proj = map.getProjection(), // 지도 객체로 부터 화면픽셀좌표, 지도좌표간 변환을 위한 MapProjection 객체를 얻어옵니다
overlayPos = customoverlay.getPosition(); // 커스텀 오버레이의 현재 위치를 가져옵니다
// 커스텀오버레이에서 마우스 관련 이벤트가 발생해도 지도가 움직이지 않도록 합니다
daum.maps.event.preventMap();
// mousedown된 좌표를 설정합니다
startX = e.clientX;
startY = e.clientY;
// mousedown됐을 때의 커스텀 오버레이의 좌표를
// 지도 컨테이너내 픽셀 좌표로 변환합니다
startOverlayPoint = proj.containerPointFromCoords(overlayPos);
// document에 mousemove 이벤트를 등록합니다
addEventHandle(document, 'mousemove', onMouseMove);
}
// 커스텀 오버레이에 mousedown 한 상태에서
// mousemove 하면 호출되는 핸들러 입니다
function onMouseMove(e) {
// 커스텀 오버레이를 드래그 할 때, 내부 텍스트가 영역 선택되는 현상을 막아줍니다.
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
var proj = map.getProjection(),// 지도 객체로 부터 화면픽셀좌표, 지도좌표간 변환을 위한 MapProjection 객체를 얻어옵니다
deltaX = startX - e.clientX, // mousedown한 픽셀좌표에서 mousemove한 좌표를 빼서 실제로 마우스가 이동된 픽셀좌표를 구합니다
deltaY = startY - e.clientY,
// mousedown됐을 때의 커스텀 오버레이의 좌표에 실제로 마우스가 이동된 픽셀좌표를 반영합니다
newPoint = new daum.maps.Point(startOverlayPoint.x - deltaX, startOverlayPoint.y - deltaY),
// 계산된 픽셀 좌표를 지도 컨테이너에 해당하는 지도 좌표로 변경합니다
newPos = proj.coordsFromContainerPoint(newPoint);
// 커스텀 오버레이의 좌표를 설정합니다
customoverlay.setPosition(newPos);
}
// mouseup 했을 때 호출되는 핸들러 입니다
function onMouseUp(e) {
// 등록된 mousemove 이벤트 핸들러를 제거합니다
removeEventHandle(document, 'mousemove', onMouseMove);
}
// target node에 이벤트 핸들러를 등록하는 함수힙니다
function addEventHandle(target, type, callback) {
if (target.addEventListener) {
target.addEventListener(type, callback);
} else {
target.attachEvent('on' + type, callback);
}
}
// target node에 등록된 이벤트 핸들러를 제거하는 함수힙니다
function removeEventHandle(target, type, callback) {
if (target.removeEventListener) {
target.removeEventListener(type, callback);
} else {
target.detachEvent('on' + type, callback);
}
}
</script>
위 소스구동시 커스텀 윈도우가 가장 위가 되어야할듯한데 실제로는 마커와 클러스터가 최상단으로 옵니다.
샘플소스에서 "마커 클러스터사용하기"와 “커스텀오버레이를 드래그 하기” 를 사용하여 위 소스를 테스트 했습니다.