선의 거리 계산하기 기능 커스텀

카카오맵 API (지도/로컬)
1

안녕하세요. 현재 이동수단을 이용하여 위치 좌표들을 실시간으로 수집을 하고 있습니다.
수집된 좌표값들을 종합하여 경로와 거리를 알고싶은데, 선의 거리 계산하기 기능을 이용하여 수정하면 될 거 같다고 생각을 하였습니다.

  1. 데이터(수집된 좌표들)를 어떻게 처리해야 다음api와 연동이 가능한지?
  2. 다른 기능을 이용해야하는지? 혹은 선의 거리 계산하기 기능을 수정하는게 간단한지? 가 궁금합니다.
    전문 개발자가 아니라서 관련하여 간단한 예제가 나와있는 소스 자료들이 있는지도 궁금합니다.
    감사합니다.
2

좌표값이 위경도라면
직교좌표계로 변환하여 계산하셔야 하며
직교좌표계의 단위가 실제 m(미터)로 얼마인지 확인하여
대략적인 거리를 구할 수 있습니다.
고도값도 기록하고 있다면 더 정확한 거리를 도출해 낼 수 있겠네요.

데이터 가공만을 원한다면
말씀하신 지도 API와의 연동은 사실상 불필요합니다.
지도 API는 데이터를 지도상에 보여줄 때 필요하지, 원하시는 데이터를 생성하는 목적으로는 맞지 않습니다.

3

빠른 답변 감사합니다.
급하게 올리다보니 제가 질문을 헷갈리게 적었습니다.
수집된 위,경도 데이터를 가지고 해당 api를 이용하여 움직인 경로를 확인할 수 있는 웹 페이지를 만들어 보려고 합니다.
(샘플은 마우스로 찍으면 경로와 길이가 표시되고 있는데, 마우스 클릭 대신 수집된 데이터들을 넣는걸로 동일한 기능 구현이 가능한지)
자바스크립트 부분을 수정하면 제가 원하는 기능의 구현이 가능한지 궁금하여 질문하였습니다.
바쁘시겠지만 답변 부탁드립니다.

4

네 가능합니다.

받은 좌표를 배열에 넣어서 Polyline 객체로 지도 위에 선을 그릴 수 있으며

// 선을 구성하는 좌표 배열입니다. 이 좌표들을 이어서 선을 표시합니다
var linePath = [
    new daum.maps.LatLng(33.452344169439975, 126.56878163224233),
    new daum.maps.LatLng(33.452739313807456, 126.5709308145358),
    new daum.maps.LatLng(33.45178067090639, 126.5726886938753) 
];

// 지도에 표시할 선을 생성합니다
var polyline = new daum.maps.Polyline({
    path: linePath, // 선을 구성하는 좌표배열 입니다
    strokeWeight: 5, // 선의 두께 입니다
    strokeColor: '#FFAE00', // 선의 색깔입니다
    strokeOpacity: 0.7, // 선의 불투명도 입니다 1에서 0 사이의 값이며 0에 가까울수록 투명합니다
    strokeStyle: 'solid' // 선의 스타일입니다
});

polyline.setMap(map);

예제에서 볼 수 있듯, 라인의 길이를 구하는 함수가 있기 때문에 전체 길이 또한 구할 수 있습니다.

 var distance = polyline.getLength();