[파이널 프로젝트] 카카오맵 API 폴리라인 좌표 서버로 보내기 - 1

최근 스프링을 배우며 파이널 프로젝트를 시작하게 되었는데 회의를 통해 반려견 산책로 매칭 웹으로 팀프로젝트의 주제가 선정되었다.

여기서 산책로를 유저들에게 어떻게 보여줄까를 고민했다가 3가지로 좁혀졌다.

1. 폴리라인을 통해 고객이 직접 코스를 그려서 다른 유저들에게 공유 및 구인게시글을 올리는 것
(카카오맵 폴리라인을 이용하여 그리고 해당 폴리라인 좌표들에 대해 서버로 보내는 방법)

2. 서비스 제공자가 직접 코스를 그려두고 유저들이 그려둔 코스들을 선택하여 구인게시글을 만들도록 하는 것
(폴리라인 좌표를 미리 만들어두면 되기때문에 서버로 보내는것이 불필요해짐)

3. 공원 API를 가지고 마커를 찍어둔 후 해당 공원에서 만자는식으로 산책로가 없이 공원에 대한 매칭만 하는 것
(공원 API를 활용하여 좌표만 가지고 만들기 때문에 폴리라인 관련된 내용이 없어 빠르게 제작 가능)

폴리라인으로 그리는 것이 더 재밌고 참신할 것 같아 1번으로 정하게 되었다.
아직 기획은 더 필요하지만 미리 시간을 내어 그리는 방법에 대해 기능을 만들어두는 것이 프로젝트개발에 용이할 것 같아 먼저 만들어두기로 했다.

카카오맵 api에서 위 그림에서 보이는 2가지 코드를 사용할 것이다.

오른쪽에 있는 선의 거리를 계산하면서 폴리라인을 그리는 것과
왼쪽에 있는 선을 그리는 코드를 이용할 예정이다.

function getTimeHTML(distance) {

    // 도보의 시속은 평균 4km/h 이고 도보의 분속은 67m/min입니다
    var walkkTime = distance / 67 | 0;
    var walkHour = '', walkMin = '';

    // 계산한 도보 시간이 60분 보다 크면 시간으로 표시합니다
    if (walkkTime > 60) {
        walkHour = '<span class="number">' + Math.floor(walkkTime / 60) + '</span>시간 '
    }
    walkMin = '<span class="number">' + walkkTime % 60 + '</span>분'

    // 자전거의 평균 시속은 16km/h 이고 이것을 기준으로 자전거의 분속은 267m/min입니다
    var bycicleTime = distance / 227 | 0;
    var bycicleHour = '', bycicleMin = '';

    // 계산한 자전거 시간이 60분 보다 크면 시간으로 표출합니다
    if (bycicleTime > 60) {
        bycicleHour = '<span class="number">' + Math.floor(bycicleTime / 60) + '</span>시간 '
    }
    bycicleMin = '<span class="number">' + bycicleTime % 60 + '</span>분'

    // 거리와 도보 시간, 자전거 시간을 가지고 HTML Content를 만들어 리턴합니다
    var content = '<ul class="dotOverlay distanceInfo">';
    content += '    <li>';
    content += '        <span class="label">총거리</span><span class="number">' + distance + '</span>m';
    content += '    </li>';
    content += '    <li>';
    content += '        <span class="label">도보</span>' + walkHour + walkMin;
    content += '    </li>';
    content += '    <li>';
    content += '        <span class="label">자전거</span>' + bycicleHour + bycicleMin;
    content += '    </li>';
    content += '</ul>'

    return content;
}

우선 오른쪽 샘플에서 코드를 보면 위 코드와 같이 있는데
필요 없는 데이터가 있으면 지우자
본인은 자전거 관련된 데이터는 필요없어서 자전거 관련된 코드를 지웠다.

function showDistance(content, position) {
    
    if (distanceOverlay) { // 커스텀오버레이가 생성된 상태이면
        
        // 커스텀 오버레이의 위치와 표시할 내용을 설정합니다
        distanceOverlay.setPosition(position);
        distanceOverlay.setContent(content);
        
    } else { // 커스텀 오버레이가 생성되지 않은 상태이면
        
        // 커스텀 오버레이를 생성하고 지도에 표시합니다
        distanceOverlay = new kakao.maps.CustomOverlay({
            map: map, // 커스텀오버레이를 표시할 지도입니다
            content: content,  // 커스텀오버레이에 표시할 내용입니다
            position: position, // 커스텀오버레이를 표시할 위치입니다.
            xAnchor: 0,
            yAnchor: 0,
            zIndex: 3  
        });      
    }
}

중간중간 거리가 필요없어 setContent()는 삭제했다.

<form action="${path}/mapView2">
	<input id="ajaxPath" name="path" type="text" hidden="hidden"  required>
	<input type="submit">  
</form>

HTML영역에 해당 코드를 심어두어 보이진않지만 텍스트 인풋을 히든 속성을 부여하여 submit하면 mapView2 url을 요청할 수 있도록 한다.

kakao.maps.event.addListener(map, 'rightclick', function (mouseEvent) {

    // 지도 오른쪽 클릭 이벤트가 발생했는데 선을 그리고있는 상태이면
    if (drawingFlag) {
        
        // 마우스무브로 그려진 선은 지도에서 제거합니다
        moveLine.setMap(null);
        moveLine = null;  
        
        // 마우스 클릭으로 그린 선의 좌표 배열을 얻어옵니다
        var path = clickLine.getPath();
    	$("#ajaxPath").val(path);
        // 선을 구성하는 좌표의 개수가 2개 이상이면
        if (path.length > 1) {

            // 마지막 클릭 지점에 대한 거리 정보 커스텀 오버레이를 지웁니다
            if (dots[dots.length-1].distance) {
                dots[dots.length-1].distance.setMap(null);
                dots[dots.length-1].distance = null;    
            }

            var distance = Math.round(clickLine.getLength()), // 선의 총 거리를 계산합니다
                content = getTimeHTML(distance); // 커스텀오버레이에 추가될 내용입니다
                
            // 그려진 선의 거리정보를 지도에 표시합니다
            showDistance(content, path[path.length-1]);  
             
        } else {

            // 선을 구성하는 좌표의 개수가 1개 이하이면 
            // 지도에 표시되고 있는 선과 정보들을 지도에서 제거합니다.
            deleteClickLine();
            deleteCircleDot(); 
            deleteDistnce();

        }
        
        // 상태를 false로, 그리지 않고 있는 상태로 변경합니다
        drawingFlag = false;          
    }  
});

$("#ajaxPath").val(path);라는 제이쿼리를 넣어 path값에 대해 히든속성을 가진 텍스트인풋의 값을 변경하도록 한다.

이렇게 하면

(37.47764992086947, 126.96936184254734),
(37.47678512570849, 126.9700405233521),
(37.47636135914537, 126.9689101526406)

라는 path값이 텍스트인풋을 통해 문자열로 옮겨진다.
이 문자열을 파싱하여 다시 선을 그리는 카카오맵API를 활용하는 JSP페이지에 넣어주면 기능은 끝이 난다.
해당 기능을 응용하여 게시글을 만들게하는것이 목적이다.