저번글에서는 API를 이용하여 마커와 텍스트(커스텀오버레이)를 구성하여
카드가 선택목록으로 넘어갈때마다 맵에 추가되는 글을 작성하였었다.
이번 글에서는 경로를 그려주는 방법 및 경로,마커를 삭제하는 방법에 대해서 작성한다
사실 모든 경로와 마커를 지우는것은 그리 어렵지않으나 마커를 하나씩만 지우는 방법에 대해서는 꽤나
고민이 필요하였다. 좋은방법으로 구성한것같지는 않으나 지금 실력으로는 이 방법바께는 생각나지 않음이
아쉬웠다.
앞에 작성한 글과 이어지는 내용이므로 링크를 참조하였다.
https://choidoosic.tistory.com/148
카카오 맵 API를 이용하여 마커와 텍스트 그려주기
해당 이미지에는 경로 이외에도 텍스트를 통하여 순서를 표기하여주었는데 순서 표기에 대한 부분은 해당 글에서는 다음 글에서 다루도록 하겠다. 일단 해당 기능을 구현하기에 앞서서 맛집과
choidoosic.tistory.com
1. 카카오 맵 API를 이용하여 경로 그려주기
위의 이미지를보면 addLine() 펑션을 사용하며 매개변수로 markers를 받아주는것을 볼수있다.
markers는 앞서 맵에 만들어진 마커들의 정보를 담고있는 배열이다
매개변수로 markers를 참조하여 그안에 담고있는 좌표의 정보만 빼내어 좌표대로 경로를 이어주기 위함이다.
위의 이미지와같이 addLine(markers)안에서 markers에 담긴 좌표정보만을 빼내어주어 linePath에 담아준다
다음 담아준 경로를 polyline의 path에 배열채로 넣어주는데 이렇게 통채로 넣어주면
배열에 담긴 경로의 순서대로 맵에 그려준다. 여기서 lines.push(polyline)을 해주는 이유는
경로를 삭제할때에 필요하기때문이다.
2. 텍스트에 순서띄워주기
현재 진행하는 만드는 프로그램에 경로와 순서는
여행 경로보기 버튼이 클릭되었을때에 짠! 하고 뜨는 방식이다.
잠시 위에서 라인을 그렸을때에 사용했던 코드를 다시보면
lookCourseBtn 즉, 여행경로 보기 버튼이 눌릴때에 addLine펑션으로 경로를 그려주는데 이때에
앞서 for문이 한번돌며 ovarlays[i].setMap(null)을 하여주는 모습을 볼수있다.
이걸 해주는 이유는 innerHTML로 순서를 써줄수도있지만 어떤 마커가 몇번인지 판단을 하는 작업부터
해야하기 때문에 조금 복잡해지는걸 피하고 전부 삭제했다가 다시 그리는 방법을 택하였다.
예를들어 칼국수, 짜장, 비빔밥 이 순서대로 있다고할때에 순서를 칼국수부터 1씩 innerHTML로 넣어준다하면
칼국수를 들고있는 HTML문을 찾아서 넣어줘야하는데 전부 numbers라는 id값을 가지고있어서
타이틀이 텍스트일때에 numbers에 번호를 넣어줘야하는데 생각만해도...복잡하다
(좋아요 기능을 구성할때는 이와 비슷한 방식을 사용하여 한개만 바꾸었다.)
addText 펑션으로 다시 positions()와 content 즉, 좌표와 텍스트값이 다시 들어가는것을 볼 수 있다.
텍스트값을 넣어줄때에 for문을 이용하여 넣는데 넣는 순서대로 1 ~ ... 증가하며
names배열에 담아둔 맛집 또는 관광지의 순서와 같이 들어가게된다
앞선 글에도 올렸지만 addText 평션의 구성은 이렇게 되어있다.
ovarlays를 담아두는 이유를 전 글에서는 지나가듯이 설명하였지만 이렇게 사용하려고 담아둔것이였다.
3. 마커 삭제 방법
이쯤 본다면 마커, 텍스트, 경로의 삭제방법은 모두 같다는것을 알 수 있을것이다.
모두 생성할때에 배열에 담아가며 .setMap(map) 을하여 지도위에 구성하여주고
삭제하고 싶을때에는 담아둔 배열을 for문을 돌려 .setMap(null)을 하여 삭제 해주면된다는 것이다.
원하는것을 마커를 한개만 삭제하고싶다할때에는
html단에서 좌표를 가지고있는 정보를 비교하여 제거하는 방법을 사용하면된다.
비교는 좌표값으로 비교하여서 삭제하였다.
참고로 좌표로 비교할때에는 toPrecision으로 비교하였고 이유는 숫자로 비교할때에는 범위 초과시
자동으로 반올림되기 때문에 문자열로 만들어 비교하였다.
참고로 dto를 구성할때에 double인지 float인지 잘 구분하도록 하자.
담을수 있는 범위의 크기가 다르니 좌표정보를 담아올때는 조심하도록하자.
혹시 궁금할수도 있어 전체 삭제의 코드도 첨부한다.
참고로 lines의 반복문을 따로 돌려주는 이유는 다른것들을
[1마커, 2마커, 3마커, 4마커] ... 식으로 배열이 구성되지만 경로같은 경우에는
[1마커 ~ 2마커, 2마커 ~ 3마커, 3마커 ~ 4마커 ....] 같은 방식으로 저장되어 다른것들보다 길이가 1만큼 적다.
생각보다 지우고 삭제하고 띄우는것은 카카오 맵api에서 기능을 제공해주어서 어렵지않다.
물론 좋은 코드를 짜는건 다른 이야기지만 ㅎㅎ
'Team Project > 제주도 여행 프로젝트' 카테고리의 다른 글
| MyCourse 모달에 띄우기 및 DB에 값 저장 (0) | 2021.11.15 |
|---|---|
| 드로그 앤 드롭 기능 구현.(경로 및 순서 다시 그리기) (0) | 2021.11.02 |
| 카카오 맵 API를 이용하여 마커와 텍스트 그려주기 (0) | 2021.10.28 |
| 기상청 날씨 api를 이용해 제주도의 실시간 날씨정보 띄워주기 (0) | 2021.10.28 |
| 카카오 맵 Api Polygon 을 이용한 구역 나누기 + 모달 (0) | 2021.10.22 |