선의 거리 계산 예제 활용

지도/로컬 API
1

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

선의 거리 계산하기 예제 중에서 각 선들을 따로 구분하고 버튼으로 맵에서 지우고 싶은데
버튼으로 지우기 위해서 어떻게 선들을 구분해줘야 할지, 지도를 한번 클릭한 상태에서 우클릭 시 처음 클릭한 점이 사라지지 않는 문제가 있는데…
갈피가 안 잡혀서 글 올려봅니다…

var drawingFlag = false; // 선이 그려지고 있는 상태를 가지고 있을 변수입니다
var moveLine; // 선이 그려지고 있을때 마우스 움직임에 따라 그려질 선 객체 입니다
var clickLine // 마우스로 클릭한 좌표로 그려질 선 객체입니다
var distanceOverlay; // 선의 거리정보를 표시할 커스텀오버레이 입니다
var dots = {}; // 선이 그려지고 있을때 클릭할 때마다 클릭 지점과 거리를 표시하는 커스텀 오버레이 배열입니다.
var cursors = [];
var deletelines;

// 지도에 클릭 이벤트를 등록합니다
// 지도를 클릭하면 선 그리기가 시작됩니다 그려진 선이 있으면 지우고 다시 그립니다
kakao.maps.event.addListener(map, ‘click’, function(mouseEvent) {

// 마우스로 클릭한 위치입니다
var clickPosition = mouseEvent.latLng;

// 지도 클릭이벤트가 발생했는데 선을 그리고있는 상태가 아니면
if (!drawingFlag) {

    // 상태를 true로, 선이 그리고있는 상태로 변경합니다
    drawingFlag = true;

    // 클릭한 위치를 기준으로 선을 생성하고 지도위에 표시합니다
    clickLine = new kakao.maps.Polyline({
        map: map, // 선을 표시할 지도입니다
        path: [clickPosition], // 선을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
        strokeWeight: 3, // 선의 두께입니다
        strokeColor: '#db4040', // 선의 색깔입니다
        strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
        strokeStyle: 'solid' // 선의 스타일입니다
    });

    // 선이 그려지고 있을 때 마우스 움직임에 따라 선이 그려질 위치를 표시할 선을 생성합니다
    moveLine = new kakao.maps.Polyline({
        strokeWeight: 3, // 선의 두께입니다
        strokeColor: '#db4040', // 선의 색깔입니다
        strokeOpacity: 0.5, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
        strokeStyle: 'solid' // 선의 스타일입니다
    });

        // 클릭 지점을 표시할 빨간 동그라미 커스텀오버레이를 생성합니다
        var circleOverlay = new kakao.maps.CustomOverlay({
            content: '<span class="dot"></span>',
            position: clickPosition,
            zIndex: 1
        });

        // 지도에 표시합니다
        circleOverlay.setMap(map);



} else { // 선이 그려지고 있는 상태이면

    // 그려지고 있는 선의 좌표 배열을 얻어옵니다
    var path = clickLine.getPath();

    // 좌표 배열에 클릭한 위치를 추가합니다
    path.push(clickPosition);

    // 다시 선에 좌표 배열을 설정하여 클릭 위치까지 선을 그리도록 설정합니다
    clickLine.setPath(path);

    var distance = Math.round(clickLine.getLength());


        // 클릭 지점을 표시할 빨간 동그라미 커스텀오버레이를 생성합니다
        var circleOverlay = new kakao.maps.CustomOverlay({
            content: '<span class="dot"></span>',
            position: clickPosition,
            zIndex: 1
        });

        if (distance > 0) {
            // 클릭한 지점까지의 그려진 선의 총 거리를 표시할 커스텀 오버레이를 생성합니다
            var distanceOverlay = new kakao.maps.CustomOverlay({
                content: '<div class="dotOverlay">거리 <span class="number">' + distance + '</span>m</div>',
                position: clickPosition,
                yAnchor: 1,
                zIndex: 2
            });
        }

        var lines = [];

        if (circleOverlay) {
            lines.push(circleOverlay);
        }

        if (distanceOverlay) {
            lines.push(distanceOverlay);
        }

        // lines 배열에 추가된 값들을 지도에 표시합니다
        for (var i = 0; i < lines.length; i++) {
            lines[i].setMap(map);
        }

        console.log(lines);
}

});

// 지도에 마우스무브 이벤트를 등록합니다
// 선을 그리고있는 상태에서 마우스무브 이벤트가 발생하면 그려질 선의 위치를 동적으로 보여주도록 합니다
kakao.maps.event.addListener(map, ‘mousemove’, function (mouseEvent) {

  // 마우스 위치를 집어 넣습니다.
  var cursor = mouseEvent.latLng;

  // 클릭 지점을 표시할 빨간 동그라미 커스텀오버레이를 생성합니다
  var circlepoint = new kakao.maps.CustomOverlay({
      content: '<span class="dot"></span>',
      position: cursor,
      zIndex: 1
  });

  // 객체를 배열에 집어 넣습니다.
  cursors.push(circlepoint);

  if (cursors.length >= 2) {
    cursors[cursors.length-2].setMap(null);
    cursors.shift();
  }

  // 지도에 표시합니다
  cursors[cursors.length-1].setMap(map);


// 지도 마우스무브 이벤트가 발생했는데 선을 그리고있는 상태이면
if (drawingFlag){

    // 마우스 커서의 현재 위치를 얻어옵니다
    var mousePosition = mouseEvent.latLng;

    // 마우스 클릭으로 그려진 선의 좌표 배열을 얻어옵니다
    var path = clickLine.getPath();

    // 마우스 클릭으로 그려진 마지막 좌표와 마우스 커서 위치의 좌표로 선을 표시합니다
    var movepath = [path[path.length-1], mousePosition];
    moveLine.setPath(movepath);
    moveLine.setMap(map);

    var distance = Math.round(clickLine.getLength() + moveLine.getLength()), // 선의 총 거리를 계산합니다
        content = '<div class="dotOverlay distanceInfo">총거리 <span class="number">' + distance + '</span>m</div>'; // 커스텀오버레이에 추가될 내용입니다

    if (distanceOverlay) { // 커스텀오버레이가 생성된 상태이면

        // 커스텀 오버레이의 위치와 표시할 내용을 설정합니다
        distanceOverlay.setPosition(mousePosition);
        distanceOverlay.setContent(content);

    } else { // 커스텀 오버레이가 생성되지 않은 상태이면

        // 커스텀 오버레이를 생성하고 지도에 표시합니다
        distanceOverlay = new kakao.maps.CustomOverlay({
            map: map, // 커스텀오버레이를 표시할 지도입니다
            content: content,  // 커스텀오버레이에 표시할 내용입니다
            position: mousePosition, // 커스텀오버레이를 표시할 위치입니다.
            xAnchor: 0,
            yAnchor: 0,
            zIndex: 3
        });
    }
}

});

// 지도에 마우스 오른쪽 클릭 이벤트를 등록합니다
// 선을 그리고있는 상태에서 마우스 오른쪽 클릭 이벤트가 발생하면 선 그리기를 종료합니다
kakao.maps.event.addListener(map, ‘rightclick’, function (mouseEvent) {

// 지도 오른쪽 클릭 이벤트가 발생했는데 선을 그리고있는 상태이면
if (drawingFlag) {
    // 마우스무브로 그려진 선은 지도에서 제거합니다
    moveLine.setMap(null);
    moveLine = null;

    // 마우스 클릭으로 그린 선의 좌표 배열을 얻어옵니다
    var path = clickLine.getPath();

    // 선을 구성하는 좌표의 개수가 2개 이상이면
    if (path.length > 1) {

        var distance = Math.round(clickLine.getLength()), // 선의 총 거리를 계산합니다
            content = getTimeHTML(distance); // 커스텀오버레이에 추가될 내용입니다

        // 그려진 선의 거리정보를 지도에 표시합니다
        if (distanceOverlay) { // 커스텀오버레이가 생성된 상태이면

            // 커스텀 오버레이의 위치와 표시할 내용을 설정합니다
            distanceOverlay.setPosition(path[path.length-1]);
            distanceOverlay.setContent(content);

        } else { // 커스텀 오버레이가 생성되지 않은 상태이면

            // 커스텀 오버레이를 생성하고 지도에 표시합니다
            distanceOverlay = new kakao.maps.CustomOverlay({
                map: map, // 커스텀오버레이를 표시할 지도입니다
                content: content,  // 커스텀오버레이에 표시할 내용입니다
                position: path[path.length-1], // 커스텀오버레이를 표시할 위치입니다.
                xAnchor: 0,
                yAnchor: 0,
                zIndex: 3
            });
        }

            deletelines = new kakao.maps.CustomOverlay({
            content: '<div class="close-button" onclick="mapdeleteline();"><span>&times;</span></div>',
            position: path[path.length-1],
            xAnchor: 1,
            yAnchor: -0.4,
            zIndex: 3,
        });

        deletelines.setMap(map);
    } else {

        // 선을 구성하는 좌표의 개수가 1개 이하이면
        // 지도에 표시되고 있는 선과 정보들을 지도에서 제거합니다.
        // 클릭으로 그려진 선을 지도에서 제거하는 함수입니다
            if (clickLine) {
                clickLine.setMap(null);
                clickLine = null;
            }


        // 클릭 지점에 대한 정보 (동그라미와 클릭 지점까지의 총거리)를 지도에서 모두 제거하는 함수입니다
        var i;
            for ( i = 0; i < dots.length; i++ ){
              if (dots[i].circle) {
                dots[i].circle.setMap(null);
              }
              if (dots[i].distance) {
                  dots[i].distance.setMap(null);
              }
          }
        dots = [];


        // 그려지고 있는 선의 총거리 정보와
        // 선 그리가 종료됐을 때 선의 정보를 표시하는 커스텀 오버레이를 삭제하는 함수입니다
        if (distanceOverlay) {
            distanceOverlay.setMap(null);
            distanceOverlay = null;
        }

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

});

function mapdeleteline() {

}

// 마우스 우클릭 하여 선 그리기가 종료됐을 때 호출하여
// 그려진 선의 총거리 정보와 거리에 대한 도보, 자전거 시간을 계산하여
// HTML Content를 만들어 리턴하는 함수입니다
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;

}

2

그리기를 종료할 때 clickLine 좌표로 새로운 선을 만들고 클릭 이벤트를 등록하면 각 선들을 구분할 수 있게 됩니다.
클릭 이벤트에서 삭제를 할 수 있는 기능을 붙이거나 이를 활용하면 지우기 기능을 구현할 수 있을 것 같습니다.
아래 코드는 오른쪽 클릭 이벤트의 일부 로직입니다.
오른쪽 클릭 후 선을 클릭하면 각 선의 좌표정보를 출력하는 로직으로 참고만 해주세요.

let array = []; //그리기가 완료된 선을 담는 변수

kakao.maps.event.addListener(map, 'rightclick', function (mouseEvent) {
    if (drawingFlag) {
        // 마우스무브로 그려진 선은 지도에서 제거합니다
        moveLine.setMap(null);
        moveLine = null;

        // 마우스 클릭으로 그린 선의 좌표 배열을 얻어옵니다
        var path = clickLine.getPath();

        if (path.length > 1) {
            let distance = Math.round(clickLine.getLength()), // 선의 총 거리를 계산합니다
            content = getTimeHTML(distance); // 커스텀오버레이에 추가될 내용입니다

            let line = new kakao.maps.Polyline({
                map: map, // 선을 표시할 지도입니다
                path: path, // 선을 구성하는 좌표 배열입니다 클릭한 위치를 넣어줍니다
                strokeWeight: 3, // 선의 두께입니다
                strokeColor: '#db4040', // 선의 색깔입니다
                strokeOpacity: 1, // 선의 불투명도입니다 0에서 1 사이값이며 0에 가까울수록 투명합니다
                strokeStyle: 'solid' // 선의 스타일입니다
            });

            //선 클릭 이벤트를 등록합니다.
            kakao.maps.event.addListener(line, 'click', function(mouseEvent) {
                kakao.maps.event.preventMap(); //지도 이벤트를 막아주는 역할을 합니다.
                console.log(line.getPath()); //클릭된 선의 좌표를 얻어옵니다.
            });

            array.push(line);
        }

        //그린 선은 지도에서 삭제합니다.
	    if(clickLine) {
            clickLine.setMap(null);
            clickLine = null;
        }
    }
});