카카오 맵 API 를 사용한 도형 좌표 표출

툴박스에서 그린 도형에 대한 좌표 값을 지도 하단에 표출 해 보기로 했습니다.

워낙 잘 되어 있는 API 라서 별 어려움은 없었습니다.

샘플 중에서 "Drawing Library에서 데이터 얻기" 소스를 약간 수정 해서 만들어 보았습니다.

여러가지 문제점을 가지고 있지만, 그래도 뭐 유용하게 사용하게 될 때가 있지 않을까 해서 한 번 만들어 보았습니다.

 

주요 요점은 DrawingManager의 drawend 이벤트에서 사용자가 그린 도형의 타입에 따라서 좌표를 표시 하는 것입니다.

manager.addListener('drawend', function(data) {
    var data = manager.getData();
    
    if(data.marker.length > 0)
    {
    	console.log("marker : " + JSON.stringify(data.marker));
    	printMarker(data[kakao.maps.drawing.OverlayType.MARKER]);
    }	
    else if(data.polyline.length > 0)
    {
    	console.log("polyline : " + JSON.stringify(data.polyline));
    	printPolyline(data[kakao.maps.drawing.OverlayType.POLYLINE]);
    }	
    else if(data.rectangle.length > 0)
    {
    	console.log("rectangle : " + JSON.stringify(data.rectangle));
    	printRectangle(data[kakao.maps.drawing.OverlayType.RECTANGLE]);
    }	
    else if(data.circle.length > 0)
    {
    	console.log("circle : " + JSON.stringify(data.circle));
    	printCircle(data[kakao.maps.drawing.OverlayType.CIRCLE]);
    }	
    else if(data.polygon.length > 0) 
    {
    	console.log("polygon : " + JSON.stringify(data.polygon));
    	printPolygon(data[kakao.maps.drawing.OverlayType.POLYGON]);
    }	

});

 

그리고 print 함수는 단순히 JSON 의 stringify 를 사용해서 표출 하였습니다.

function printPolygon(polygons) {
    var len = polygons.length, i = 0;
	var message = "다각형";
	console.log(message + ":" + JSON.stringify(polygons));
	message += '<p>' + JSON.stringify(polygons);
    var resultDiv = document.getElementById('result');
    resultDiv.innerHTML = message;
}

 

그리고, 어떤 비즈니스에 적용 시킬지가 중요하긴 하지만,

사용자가 그린 오버레이가 많을 경우 지저분 해 보일 수 있기 때문에 도형을 그리고 그 다음 도형을 그릴 경우 앞에 그린 도형을 지울 수 있도록 로직을 마련 했습니다.

DrawingManager 의 이벤트 중에서 #drawstart , #drawend 를 이용해서 구현 해 보았는 데요.

drawend 에서는 위에서 구현 한 것 처럼 좌표 및 해당 오버레이의 정보를 출력하도록 하였고,

drawstart 에서는 어떤 #오버레이 정보가 발견 되면 해당 오버레이를 지워주는 작업을 하도록 하였습니다.

manager.addListener('drawstart', function(data) {
	var mapobj = manager.getOverlays();
   
    if(mapobj.marker.length > 0)
    {
    	removeOverlays(mapobj.marker);
    }	
    else if(mapobj.polyline.length > 0)
    {
    	removeOverlays(mapobj.polyline);
    }	
    else if(mapobj.rectangle.length > 0)
    {
    	removeOverlays(mapobj.rectangle);
    }	
    else if(mapobj.circle.length > 0)
    {
    	removeOverlays(mapobj.circle);
    }	
    else if(mapobj.polygon.length > 0) 
    {
    	removeOverlays(mapobj.polygon);
    }	

});

 

그런데, 마커나 폴리라인은 안지워지고, x 마크도 안지워 지네요 ^^;;

뭐 중요한 것은 아니라서 넘어 가도록 하겠습니다.

removeOverlays 함수는 해당 오버레이 객체 배열을 받아서 setMap(null) 과 remove 처리를 해 주었습니다.

x 마크가 안 지워지는 이유가 뭘까? ^^;;

function removeOverlays(overlays) {
    var len = overlays.length, i = 0;

    for (; i < len; i++) {
        overlays[i].setMap(null);
        manager.remove(overlays[i]);
    }
	
    overlays = [];
}

 

 

해당소스는 아래에 첨부 합니다.

kakao_map_drawing3.html

0.01MB

이상.