스터디일지/PROJECT17 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. Final Project - Random Navi - 버튼 수정 하기 버튼을 수정하려는 곳은 안내 받은 경로를 저장해서 최근 목적지를 보는 화면이다. 화면은 점차 디자인을 바꿨었다. 화면은 사진을 첨부한 것처럼 색상과 버튼 위치를 바꿔서 아래 사진 처럼 만들었다. 그런데 문제가 생겼는데 저장된 경로가 많았을 경우는 괜찮지만 저장된 경로가 많이 없는 경우 로그아웃 버튼이 위로 올라와 있는 상태 였다. 이 부분도 css 코드를 고쳐서 해결 했는데 현재 직면한 문제는 로그아웃 버튼 글씨가 세로로 나오는 부분이였다. 해당 CSS 코드 이며 이 부분을 고치려고 구글링을 해봤다. /* 버튼과 관련된 코드 */ .app-footer button.logout-button { font-size: 10px; /* 버튼의 텍스트 크기를 작게 조절 */ padding: 0.3rem 0.7rem.. 2023. 10. 31. 이전 1 2 3 4 5 다음
