Project/5V

[3nd Project] 카카오 Api로 주차장 구현하기 10

ParkYeseul 2024. 11. 19. 11:49

오우 3일 만에 한겨울이 와서 

손이 시렵고 

발이 시렵고 

눈도 시렵고 

귀도 시렵고

 

추워 추버 추버ㅓ..

아침에 일어났더니 마켓컬리가 와있어서 신나게 상품깡

그렇지만 이거 샀는데 4만원이라고? 
(물가 미쳤다)

그릭요거트 3개 샀는데 12000원???????????????

띠용핑

 

 

오늘은 주차장 CSS 마무리 짓는 날

네네 제일 미뤄왔던 일을 해야합니다.

 

 

오늘 안에 다 할 수 있을까??0.0

불가능은 없다!

 

 

 

 

 

상세적인 css를 하고 있습니다. 

일단 검색창을 누르면 검색결과를 자동완성 값으로 하고 있는데

이 검색창이 자기 마음대로 올라가 있어서 

고치는 중

 

 

뜨아아는 뭘까요?

 

 

검색창 고쳤고

상세 페이지 길찾기 버튼 누르면 바로 탭 넘어가서 적히도록 하고 싶은데 
역시나 위도 경도 값으로 뜨는 군요!


자 길찾기 버튼 누르면 바로 탭이 전환되면서 장소명이 도착지로 입력은 되나
이 장소를 읽지 못하는 카카오api..

 

// 출발지와 도착지의 좌표를 저장할 변수
let startCoords = null;
let endCoords = null;

async function convertAddressToCoords(address, type) {
    const geocoder = new kakao.maps.services.Geocoder();
    return new Promise((resolve, reject) => {
        geocoder.addressSearch(address, function(result, status) {
            if (status === kakao.maps.services.Status.OK) {
                const coords = `${result[0].x},${result[0].y}`; // 경도, 위도 형식
                if (type === 'start') {
                    startCoords = coords; // 출발지 좌표 저장
                } else if (type === 'end') {
                    endCoords = coords; // 도착지 좌표 저장 (이 경우는 거의 사용하지 않음)
                }
                resolve(coords);
            } else {
                reject(`"${address}"를 좌표로 변환할 수 없습니다.`);
            }
        });
    });
}

 

주소나 장소명을 Kakao Geocoder API로 좌표로 변환(길찾기 API에 사용할 수 있도록)
공공데이터에서 위도.경도값을 받아와서 addressSearch를 통해 주소를 좌표로 변환한다.

이 함수가 있으면 공공데이터에서 받아온 장소명이 카카오 api에 없어도 위도, 경도를 통해 위치를 알려주고 장소명까지

출력되게 해서 가져올 수 있다는 말씀! 

 

장하다. 우리 api

검색창이 검색 결과만 클릭해야지 검색 결과창이 닫히는 우리 검색창

  // 외부 클릭 감지 및 자동완성 창 닫기
    document.addEventListener('click', (event) => {
        const searchInput = document.getElementById("parking-search"); // 검색 입력 필드
        if (
            !resultsContainer.contains(event.target) && // 클릭 대상이 자동완성 창 내부가 아니고
            event.target !== searchInput // 클릭 대상이 검색창이 아닐 때
        ) {
            resultsContainer.style.display = 'none'; // 자동완성 창 닫기
        }
    }, { once: true }); // 한 번 실행 후 리스너 제거

이렇게 하나 하나 코드를 넣어줘야, 검색창이 닫힙니다.

개발을 하다보니 이런 사소한 것도 다 기능이었다.는 사실을 알게 되었습니다.

전혀 사소하지 않은 사람 나야나🎄

이제 폴리라인을 만들어주러 갑니다. 

 

 

목적지는 뱅뱅사거리 입니다~

강남에 떡도리탕 먹으러 가고싶다.

또간집 나오기 전부터 먹었는데 거기 나오고 이젠 먹지를 못해 . . . . 

무한 웨이팅 . . .

 

//경로 데이터 표시(텍스트)
function displayRoute(data) {
    const routeDirections = document.getElementById("route-directions");
    routeDirections.innerHTML = ''; // 기존 결과 초기화

    // 경로 데이터에서 주요 정보 추출 및 표시
    if (data.routes && data.routes[0]) {
        const route = data.routes[0];
        const summary = route.summary;
        const sections = route.sections;

        // 요약 정보 표시
        const distance = summary.distance; // 총 거리 (미터 단위)
        const duration = summary.duration; // 예상 소요 시간 (초 단위)
        
        routeDirections.innerHTML += `
            <h3>경로 요약</h3>
            <p>총 거리: ${(distance / 1000).toFixed(2)} km</p>
            <p>예상 소요 시간: ${(duration / 60).toFixed(0)} 분</p>
        `;


        // 길 안내 정보 표시
        routeDirections.innerHTML += `<h3>길 안내</h3>`;
        sections.forEach(section => {
            section.guides.forEach(guide => {
                routeDirections.innerHTML += `
                    <p>${guide.guidance} (${guide.distance} m)</p>
                `;
            });
        });
    // 지도에 경로 표시 추가
    displayRouteOnMap(route); // 지도에 경로 표시
} else {
    routeDirections.innerHTML = '<p>경로를 찾을 수 없습니다.</p>';
}
}

// 경로 데이터를 지도에 표시
function displayRouteOnMap(route) {
  

    // 경로 데이터를 처리하여 폴리라인에 사용할 좌표 배열 생성
    const path = route.sections.flatMap(section => 
        section.guides.map(guide => new kakao.maps.LatLng(guide.y, guide.x))
    );

    // 폴리라인 생성
    const polyline = new kakao.maps.Polyline({
        path: path, // 경로 좌표 데이터
        strokeWeight: 5, // 선 두께
        strokeColor: '#FF0000', // 선 색상
        strokeOpacity: 0.7, // 선 불투명도
        strokeStyle: 'solid' // 선 스타일
    });

    // 지도에 폴리라인 추가
    polyline.setMap(map);

    // 경로에 맞게 지도 중심과 확대 수준 설정
    const bounds = new kakao.maps.LatLngBounds();
    path.forEach(coord => bounds.extend(coord));
    map.setBounds(bounds);
}

네 아주 간단했습니다. 헤헷 

저 일단 오전에 2시간 반 가량 이렇게 작업했는데 
2탄은 오후에 쓸게요 
눈이랑 코가 너무 맵습니다 잠시 쉬어야겠어요..