(샘플) "커스텀오버레이를 드래그 하기" customoverlay 속도 이슈 문의 드립니다

지도/로컬 API
#1

안녕하세요
“커스텀오버레이를 드래그 하기” 소스 부분를 조금 변경 하여 개발중인데
customoverlay 속도 이슈 때문에 문의 드립니다
(사실 C#만 개발 해왔는데 자바스크립트는 정말 초보 수준입니다ㅠ)

제가 구현하고자 하는 것은 지도 맵클릭할때 마다 customoverlay 계속 생성 후
각각의 customoverlay 를 개별로 드래그 하는 것입니다
그래서 제가 구현한 방법은 "content.myParam"에 customoverlay 객체를 할당하여 추후 onMouseDown 나 onMouseUp 이벤트 핸들러에서 개별 처리를 위해서 아래와 같이 구현 했습니다. 제가 원하는대로 개발은 되었으나, 드래그시 버벅 거림이 장난 아닙니다 ㅠ
혹시 해결 방안이 있을까요???

daum.maps.event.addListener(map, ‘click’, mapClickListener);

function mapClickListener(mouseEvent) {
    var content = document.createElement('div');
    content.className = 'red';
    content.innerHTML = "10";
    var customoverlay = new daum.maps.CustomOverlay({
        map: map,
        content: content,
        position: mouseEvent.latLng
    });
   content.myParam = customoverlay;
    addEventHandle(content, 'mousedown', onMouseDown);
    addEventHandle(document, 'mouseup', onMouseUp);
}

function onMouseDown(e) {
// 커스텀 오버레이를 드래그 할 때, 내부 텍스트가 영역 선택되는 현상을 막아줍니다.
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
var customoverlay =e.target.myParam;

    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);
}
#2

DOM 엘리먼트에 임의의 속성값을 지정하여 값을 넘기는 방식(content.myParam)은 사용하시면 많은 혼란을 야기합니다.
관리도 힘들고요. JS 쪽에서는 안티 패턴입니다.

아래와 같이 전역 컨텍스트가 아닌
mapClickListener 함수 스코프 안에서 onMouseDown, onMouseMove, onMouseUp 모두를 선언하시고 사용하세요

function mapClickListener(mouseEvent) {    
    var content = document.createElement('div');
    content.className = 'red';
    content.innerHTML = "10";
    
    var customoverlay = new daum.maps.CustomOverlay({
        map: map,
        content: content,
        position: mouseEvent.latLng
    });

    addEventHandle(content, 'mousedown', onMouseDown);
    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);
	}
}
1개의 좋아요