[카카오 지도 API] 장소 사이를 선(polyline)으로 이어서 나타내기

기존 코드

지도에 마커만 찍혀 있으면 순서를 알아보기 어렵다.

기존 코드는 아래처럼 마커를 표시했지만 장소 1-2-3-.. 순서대로 경로를 이어주지 않아서 순서를 알아보기가 쉽지 않다.

기존 코드

 

경로를 알아보기 쉽게 폴리라인을 이어서 나타내기

우선 카카오 지도 API 공식 문서와 공식 샘플 확인해보자.

- Polyline 관련 공식 문서

https://apis.map.kakao.com/web/documentation/#Polyline

- 지도에 도형 표시하는 샘플

https://apis.map.kakao.com/web/sample/drawShape/

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

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

// 지도에 선을 표시합니다 
polyline.setMap(map);

 

kakao.maps.Polyline 객체로 폴리라인을 생성하고, .setMap() 메서드로 폴리라인을 지도에 표시한다.

그리고 폴리라인을 구성하는 좌표는 kakao.maps.LatLng 객체로 구성된다. 좌표는 Polyline 객체 생성 시 지정할 수도 있고, API 문서를 보면 .setPath() 메서드를 통해 지정할 수도 있다.

 

폴리라인의 strokeStyle 종류는 아래 문서에서 확인할 수 있다.

 

내 코드는 일차별로 저장되는 장소가 달라서 좌표 목록을 나타내는 linePath와 폴리라인 객체가 될 polyline를 객체 배열(?)로 지정했다.

일차(dayNum)을 사용했기 때문에 dayNum=1 이면 linePath[1] = {...} 이런 식으로 구성된다.

또, 장소 삭제 버튼을 누르면 마커와 함께 폴리라인도 삭제가 되어야한다. 카카오 데브톡에서 찾아보니 아래 글이 있어서 참고했다.

 

장소 추가 시 폴리라인 그리기

1. 먼저 linePath와 polyline을 전역 변수로 선언했다.

 

2. 장소 추가 시 호출되는 지도에 선(폴리라인)을 그리는 drawLinePath() 함수를 작성한다.

 

장소 추가 시 사용한 placePosition을 그대로 drawLinePath() 함수 파라미터로 넘겨줬다.

placePosition은 kakao.maps.LatLng 객체기 때문에 폴리라인을 그리는 좌표값으로 바로 사용 가능하다.

 

먼저 linePath 배열에 dayNum에 해당하는 인덱스가 존재하지 않는다면 배열 초기화를 해준다.

그 다음 linePath[dayNum]에 해당 장소의 좌표값을 넣어준다.

 

선 색상 지정 부분은 마커 색상과 맞춰주려고 넣은 코드!

 

좌표값이 추가되었으니 이제 지도에 폴리라인을 그려야한다.

해당 좌표값을 이용해서 폴리라인을 그려야하니까 폴리라인 객체 생성 시 path 속성에 linePath를 지정한다.

그 후 .setMap()으로 지도에 폴리라인을 표시한다.

 

그리고 장소 추가 시 마다 폴리라인을 지도에 그리게 됨 -> 선이 겹쳐져서 또 그려지기 때문에 이미 그려진 폴리라인이 있으면 .setMap(null)으로 폴리라인을 다 지우고 그려야한다!

 

장소 삭제 시 지도에 폴리라인 알맞게 다시 그리기

1. 장소 삭제 버튼 클릭 시 호출되는 handleRemoveBtnClick() 함수 내부에 코드를 추가하자.

해당 장소의 좌표값을 linePath에서 지워야하기 때문에 .findIndex() 함수로 해당 좌표값이 linePath[dayNum] 내부 몇 번째에 존재하는지(인덱스) 찾는다. linePath[dayNum]에 해당 장소의 좌표값이 존재하지 않으면 -1을 반환한다.

존재한다면 .splice()로 linePath에서 해당 좌표를 제거한다.

 

그리고 해당 장소를 지웠으니, 폴리라인도 함께 지도에서 제거해야한다. -> 해당 좌표값을 지운 linePath 값들로 다시 그리면 된다

 

2. 폴리라인을 다시 그리는 redrawLinePath() 함수를 작성해보자.

 

해당 장소를 지우고 linePath가 비워졌다면(장소가 아예 존재하지 않는 상태라면) .setMap(null)으로 지도에서 폴리라인을 지우고, 해당 일차의 객체 배열도 지웠다.

장소가 존재하는 상태라면 .setMap(null)으로 장소 삭제 전에 그려진 기존 폴리라인을 지우고, .setPath()로 장소 삭제한 뒤의 좌표값만 남아있는 linePath로 다시 경로를 지정해준 뒤, .setMap()으로 지도에 그려준다.

 

결과

 

장소 추가, 제거 시 폴리라인이 잘 그려지는 것을 확인할 수 있다!