Develop/JPA14 전기차 충전소 길찾기 (7) 오늘의 작업내용 ✅ 길찾기 네비게이션 1000m 단위 km로 변환✅ 도착 시간 시/분으로 표시✅ 자동완성 CSS✅ 자동완성시 해당 지역 아이콘 추가하기 까지 하고 SQLD 공부하기! ✅ 길찾기 네비게이션 1000m 단위 km로 변환 + 도착 시간 시/분 표시 작업 전 사진! 길 찾기 시 제공되는 정보에 m로 표시가 되어있어서 1000m 단위를 km로 바꾸고89분 이렇게 표시되던 것들도 시간/분 단위로 바꿨다. 1시간 이상이면 1시간 + 분 으로1시간 미만이면 분 으로 표시되게 완료!// 총 예상 이동 시간 계산const totalDurationInSeconds = routeData.routes[0].summary.duration;const totalHours = Math.floor(totalD.. 2024. 11. 16. 전기차 충전소 API (6) 마지막 작업 내용 : 팝업창에 나온 전기차 충전소 위치를 충전소 길 찾기로 전달해서 도착지점 설정하기 오늘 작업 내용 : ✅리스트 불러올 때 지도에 마커 전부 표시, 해당 마커 클릭시 팝업창 뜨게하기 오늘 오전엔 팀원들 작업 내용 다 합치고 다시 배포하느라 한게 많이 없다! ✅ 리스트 불러올 때 지도에 마커 전부 표시, 해당 마커 클릭시 팝업창 뜨게하기 기존에 사용하던 코드에서 약간 수정했다.// 마지막으로 생성된 마커를 추적할 전역 변수let lastMarker = null;// displayResults 함수에서 전역 매핑 객체 사용function displayResults(items) { const resultList = document.querySelector(".searchlist u.. 2024. 11. 14. 전기차 충전소 길찾기 (5) 오늘의 작업내용!오늘은 오전에 이 정도로 끝내고,시간 되면 네이티브 하고 안되면 sqld에 집중...! ✅팝업창에 나온 전기차 충전소 위치를 충전소 길 찾기로 전달해서 도착지점으로 설정하기 기존에 리스트를 클릭하면 해당 충전소의 정보를 stationData에 저장해둔걸 최대한 활용했다. kakao map에 도착지 선택시 처리 코드// 도착지 선택 시 처리function selectDestinationPlace(place) { document.getElementById("destinationInput").value = place.place_name; document.getElementById("destinationCoords").value = `${place.x},${place.y}`; .. 2024. 11. 13. 전기차 충전소 API 상세 정보 팝업 (4) 오늘도 돌아온 작업 내용 정리 시간! 오늘은 리스트 클릭 시 해당 지역에 마커가 찍히면서 충전소 상세정보 팝업이 뜨게 하기! ✅ 리스트 클릭 시 해당 지역 마커 + 상세정보 팝업 마지막까지의 작업 내용 ↓ 여기에 이어서 리스트 클릭 시 카카오 지도에 마커를 전달하면서 해당 위치로 이동하게 한 후 팝업창이 나오게 구현했다. 리스트를 만들때 사용했던 lat, lng (위도,경도)를 이용해서 kakaomap에 전달했고 전달받은 값에 마커가 찍히게 했다.위도와 경도 + 각종 팝업창에 띄울 필요한 값들을 생각해서 클릭 시 같이 전달하게 했다.listItem.addEventListener("click", function () { const stationData = { name: displa.. 2024. 11. 12. 전기차 충전소 API 데이터 가공하기 (3) 오늘 작업한 내용들 정리하기! ✅충전소 검색 결과 CSS✅페이지네이션 버튼 누르면 검색 결과의 최상단으로 이동✅각 충전기 상태 업데이트✅이용자 제한 여부 표시✅사용자한테 현재 위치 받아서 카카오지도에 표시하기✅검색결과에 나온 충전소 위치들의 lat,lng(위도,경도) 이용해서 카카오지도에 전달해서 마커표시✅입력 폼 삭제✅충전기 타입에 대한 필터링 부분 적용하기 ✅충전소 검색 결과 CSS 기존에 이렇게 나오는 부분을 정리했다. ✅페이지네이션 / 버튼 누르면 검색 결과의 최상단으로 이동 결과값에 대한 페이지네이션을 주고 좌 우 버튼을 통해 10개씩 표시되게 했다.한 결과값에 대한 list는 30개씩 가져오게 했다! 스크롤 해서 30개의 충전소 리스트를 확인할 수 있다.// 페이지네이션func.. 2024. 11. 11. 전기차 충전소 API 호출하기 (2) 전기차 충전소 API 호출하기 (1)에 이어서,, 마지막 작업으로 충전소 목록을 가져오게 했고 다음으로 해야 할 것들은 충전기 타입 부분 추가해서 어떤 충전기 타입인지 표시하기, 해당 지역의 모든 충전소 값들을 가져오기,충전소 넘치는거 css하기,리스트에 나온 충전소들 선택하면 지도에 라벨로 표시하기,라벨 클릭시 해당 충전소에 대한 자세한 정보 팝업창으로 표시하기 정도로 생각하고 작업하기! 충전기 타입 추가, 표시다시 공공데이터 가이드로 돌아가서 어떤 충전기 타입으로 주고 있는지 확인하기! 요렇게 제공하고 있으니 각 충전기 타입의 코드에 맞게 설명부분을 업데이트 했다.chargerTypeMap 객체에 충전기 타입 코드와 이름을 매핑했고 chargerTypeMap 객체에서 type변수에 해당하는 .. 2024. 11. 8. 이전 1 2 3 다음
