📅 2024-09-23 개인프로젝트 24일차 - 지도 API 오류 수정

TODO

1. 지도 API 오류슈정

---

1. 지도 API 오류슈정

1. 개인프로젝트 17일차에서 지도 API 오류났던걸 수정했다.

• 오류 : 카테고리별로 검색했을때 마커는 뜨지만 장소정보가 나오지 않는 오류

2. 해결과정

1) 카카오지도 API 라이브러리 로직과 내가 추가한 로직(찾아가기 클릭 시 지도가 해당 구장 위치로 이동하고 마커 뜨게하는 것)을 분류를 안해놨다..
2) 분류를 했더니 내가 추가한 로직이 적용이 안됐다..
3) 분석해보니 찾아가기 버튼 클릭 이벤트 로직에서 지도 위치 이동이랑, 마커 추가에 해당하는 로직의 lat, lng(위도, 경도)값을 설정을 안해놨다..
4) 아래는 수정한 로직

// 찾아가기 버튼 클릭 이벤트
document.querySelector('.find-map-link').addEventListener('click', function(event) {
    event.preventDefault();

    const lat = parseFloat(this.getAttribute('data-lat'));
    const lng = parseFloat(this.getAttribute('data-lng'));

    if (map) {
        // 지도 위치 이동
        map.setCenter(new kakao.maps.LatLng(lat, lng));

        // 마커 추가
        const marker = new kakao.maps.Marker({
            position: new kakao.maps.LatLng(lat, lng),
            map: map
        });
    } else {
        console.error('map 객체가 정의되지 않았습니다.');
    }
});

5. 아래는 구장정보 페이지 시연 영상!