import React, { useState, useEffect } from "react";
const Map = () => {
// 기타 handle 함수
const handleSearch = () => {
const searchData = {
// 기타 코드
};
console.log("조회 데이터:", searchData);
const queryParams = new URLSearchParams(searchData).toString();
const apiUrl = `${apiURLs.map}?${queryParams}`;
fetch(apiUrl)
.then(response => {
if (!response.ok) {
throw new Error("네트워크 응답이 올바르지 않습니다 " + response.statusText);
}
return response.json();
})
.then(data => {
console.log("API 응답 데이터:", data);
// 데이터가 객체인지 확인
if (Array.isArray(data.data)) {
data.data.forEach(popup => {
const popupAddress = `${popup.popupCity} ${popup.popupLocal} ${popup.popupLocation}`;
console.log("주소: ", popupAddress);
});
} else {
console.error("API 응답 데이터의 'data'가 배열이 아닙니다.");
}
})
.catch(error => {
console.error("API 요청 오류:", error);
});
}
useEffect(() => {
const script = document.createElement("script");
script.type = "text/javascript";
script.src = "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=앱키&libraries=services";
script.onload = () => {
window.kakao.maps.load(() => {
const container = document.getElementById("map");
const options = {
center: new window.kakao.maps.LatLng(37.5665, 126.9780),
level: 3
};
const map = new window.kakao.maps.Map(container, options);
// const geocoder = new window.kakao.maps.services.Geocoder();
});
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return (
//기타 코드
);
};
export default Map;
위 코드와 같이 useEffect 구문을 통해 지도 로드까지는 성공적으로 진행했으나 geocoder을 생성하는 부분에서 자꾸 아래와 같은 에러가 발생합니다.
Uncaught runtime errors:
ERROR
Cannot read properties of undefined (reading ‘Geocoder’) TypeError: Cannot read properties of undefined (reading ‘Geocoder’)
저 부분에서 geocoder을 생성하여 handleSearch 부분에서 popupAddress를 받아 마커로 표시하고 싶은데 어떻게 해결해야 할 지 조언 부탁 드립니다…