본문 바로가기

스터디일지72

Final Project - Random Navi - 마커 표시하기 - 최근 목적지 - PART 4 네비게이션에서 경로 안내를 받으면 안내 받은 경로 그대로 저장이 된다. 경로가 저장이 되면 최근 목적지에 들어가서 확인이 가능하다. 최근 목적지를 클릭하고 들어가면 그동안 안내 받았던 경로 목록이 뜨고 그 경로를 다시 가고 싶다면 해당 목록을 클릭해서 그 경로 그대로 안내가 된다. 다만, 출발지, 도착지, 경유지 마커가 표시 되지 않아 경로만 본다면 어디서 출발하고 도착하는지 또 어디를 경유하는지 알수가 없다. 그래서 마커를 표시하기로 했다. 마커를 표시하기 전에 좌표를 알아야 해서 data를 확인했고 내용은 다음과 같다. 내용 대로만 본다면 histories.js에서 가능할 것 같아 코드를 다음과 같이 짰다. 1차 코드는 최근 목적지의 행의 route_id를 가져와서 코드를 구현했는데 다음과 같다. /.. 2023. 11. 5.
Final Project - Random Navi - 마커 표시하기 - 경유지 표시 - PART 3 위의 사진은 수정하기 전 사진이지만 출발지와 도착지 마커는 표시가 되는데 경유지를 지날때는 위의 사진에서 보는 것처럼 어느 부분이 경유지인지 알기 어려워서 경유지인 곳에 마커를 넣기로 했다. 1. 정보 확인하기 마커에는 꼭 필요한 위도, 경도 좌표가 필요함으로 data에 정보가 담겨 있는지 확인해 봐야 하는데 navi.js 에서 function remakeRandomNavi(lat, lng) 함수에 아래와 같은 정보가 필요하다는 것을 확인했다. console.log("주소: " + currentAddress); console.log("경유지 y: " + waypointsY + ", 경유지 x:" + waypointsX); console.log("목적지 y: " + destinationLatitude + .. 2023. 11. 1.
Final Project - Random Navi - 마커 표시하기 - 출발지와 도착지 - PART 2 지도에 마커를 잘 표시 했는데 수정사항에 맞춰 다시 코드를 고치려고 한다 수정사항으로 생각했던 것 중에 이미지를 넣어서 시각적으로 출발지와 도착지를 알 수 있게 하는게 더 좋을거 같아서 먼저 시행했다. 참고로한 예시 코드는 아래 주소를 첨부했다. https://apis.map.kakao.com/web/sample/markerWithCustomOverlay/, https://apis.map.kakao.com/web/sample/categoryMarker/, https://apis.map.kakao.com/web/sample/multipleMarkerImage/, https://apis.map.kakao.com/web/sample/markerWithCustomOverlay/. 이미지는 출발과 도착에 맞게 적.. 2023. 11. 1.
Final Project - Random Navi - 마커 표시하기 - 출발지와 도착지 - PART 1 경로 안내 화면에서 위의 사진처럼 경로를 잘 안내해 주지만 어느 곳에서 출발하고 도착하는지 길 찾기 버튼을 누른 사람만 알 수 있었다 그래서 https://apis.map.kakao.com/web/sample/multipleMarkerImage/에 예제로 나와있는 코드와 프로젝트에서 구현된 코드를 사용하여 출발지와 도착지 마커를 표시하려고 한다. navi.js의 function makeLiveMap은 응답받은 객체를 가공해서 위의 사진처럼 경로안내를 해주는 함수를 이용하려고 한다. 위의 함수는 data라는 parameter를 입력 받는데 data에는 출발지와 목적지의 데이터가 담겨있다. function makeLiveMap(data) { waypointCount = 0; clearPolylines(); .. 2023. 10. 31.

티스토리툴바