전기차 충전소 길찾기 (7)

오늘의 작업내용

 

✅ 길찾기 네비게이션 1000m 단위 km로 변환

✅ 도착 시간 시/분으로 표시

✅ 자동완성 CSS

✅ 자동완성시 해당 지역 아이콘 추가하기

 

까지 하고 SQLD 공부하기!

 

 

---

 

 

✅ 길찾기 네비게이션 1000m 단위 km로 변환 + 도착 시간 시/분 표시

 

 

작업 전 사진!

1119m 이동

 

 

길 찾기 시 제공되는 정보에 m로 표시가 되어있어서 1000m 단위를 km로 바꾸고

89분 이렇게 표시되던 것들도 시간/분 단위로 바꿨다.

 

1시간 이상이면 1시간 + 분 으로

1시간 미만이면 분 으로 표시되게 완료!

// 총 예상 이동 시간 계산
const totalDurationInSeconds = routeData.routes[0].summary.duration;
const totalHours = Math.floor(totalDurationInSeconds / 3600); // 시간 계산
const totalMinutes = Math.floor((totalDurationInSeconds % 3600) / 60); // 분 계산

// 예상 이동 시간을 시간과 분 형식으로 표시
let totalDurationText;
if (totalHours > 0) {
    // 1시간 이상인 경우: 1시간 + 분 형식으로 표시
    totalDurationText = `총 예상 이동 시간: 약 ${totalHours}시간 ${totalMinutes}분`;
} else {
    // 1시간 미만인 경우: 분 형식으로 표시
    totalDurationText = `총 예상 이동 시간: 약 ${totalMinutes}분`;
}

// 예상 이동 시간 표시
const totalDurationElement = document.createElement('div');
totalDurationElement.className = 'total-duration';
totalDurationElement.innerHTML = `<strong>${totalDurationText}</strong>`;
directionsList.appendChild(totalDurationElement);

 

 

---

 

 

✅ 자동완성 CSS

 

길 찾기 부분에 출발지, 도착지 검색창에 카카오 맵 API로 사용한 키워드로 자동완성 기능을 구현해놨었는데

이 부분에 CSS를 추가했다.

 

일단 임시 헤더를 받아서 자리를 잡아놨다.

그리고 카카오 API 중에 자동완성된 값들에 category_group_code와 category_group_name을 사용해서

어떤 그룹에 속하는지 확인해놓고 해당하는 아이콘을 넣어서 좀 더 보기 편하게 하려고 했다.

category_group_code - category_group_name
MT1 - 대형마트
CS2 - 편의점
PS3 - 어린이집, 유치원
SC4 - 학교
AC5 - 학원
PK6 - 주차장
OL7 - 주유소, 충전소
SW8 - 지하철역
BK9 - 은행
CT1 - 문화시설
AG2 - 부동산중개
PO3 - 공공기관
AT4 - 관광명소
AD5 - 숙박
FD6 - 음식점
CE7 - 카페
HP8 - 병원
PM9 - 약국

 

이렇게 group_code를 받아서 icon을 지정하려고 셋팅해놨다.

// category_group_code에 따른 아이콘 URL을 반환하는 함수
function getIconUrl(categoryCode) {
    switch (categoryCode) {
        case 'MT1':
            return '/icons/mart.png'; // 대형마트
        case 'CS2':
            return '/icons/convenience.png'; // 편의점
        case 'SW8':
            return '/icons/subway.png'; // 지하철역
        case 'BK9':
            return '/icons/bank.png'; // 은행
        case 'HP8':
            return '/icons/hospital.png'; // 병원
        case 'PM9':
            return '/icons/pharmacy.png'; // 약국
        // 나중에 더 추가하기!
        default:
            return '/icons/default.png'; // 기본
    }
}

 

아이콘에 대한 사진들은 나중에 추가할 예정이고 일단 넣은 값들에 대해서 잘 뜨는지 확인했다.

키워드 옆에 미리 설정해둔 값들로 잘 불러오는거 확인하고 오늘은 끝!