위에 올렸던 중심좌표 설정 코드를 주석처리하게 되면 기본 설정한
useEffect(() => {
const script = document.createElement(‘script’);
script.src = ${process.env.REACT_APP_KAKAOMAP_API};
script.async = true;
script.onload = () => {
const mapContainer = document.getElementById(‘map’);
const mapOptions = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 9
};
const map = new kakao.maps.Map(mapContainer, mapOptions);
addAddresses(map);
kakaoMapInfoCheck(map);
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, [addAddresses, kakaoMapInfoCheck]);
의 중심코드로 중심설정이 되고 모든 마커들이 바운드 안에 들어가게 구현 및 확인이 되고 있습니다.
테스트 데이터로는
//지도 불러오기
const addAddresses = useCallback((map) => {
// 마커 이미지 생성
const imageSrc = ${process.env.REACT_APP_KAKAO_MARKERIMG};
const imageSize = new kakao.maps.Size(30, 30);
const markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize);
// 길찾기 아이콘 생성
const imageSrc_road = ${process.env.REACT_APP_KAKAO_ROADIMG};
const roadImage = <img src="${imageSrc_road}" width="15" height="15">;
// 마커를 표시할 위치와 title 객체 배열
const geocoder = new kakao.maps.services.Geocoder();
const addressList = [
‘제주특별자치도 제주시 무근성7길 18’,
‘제주특별자치도 제주시 연북로 48’,
‘제주특별자치도 제주시 노형로 407’,
‘제주특별자치도 제주시 광양14길 12’,
‘제주특별자치도 제주시 화삼북로 90’,
‘제주특별자치도 제주시 관덕로15길 16’,
‘제주특별자치도 제주시 태성로 34’,
‘제주특별자치도 제주시 오남로 42-6’,
‘제주특별자치도 제주시 정존11길 68 (노형동, 정든마을3단지)’,
‘제주특별자치도 제주시 은수길 85’
]
const coordsList = [];
const geocodePromise = addressList.map(address => new Promise((resolve) => {
geocoder.addressSearch(address, (result, status) => {
if (status === kakao.maps.services.Status.OK) {
const coords = new kakao.maps.LatLng(result[0].y, result[0].x);
coordsList.push(coords);
console.log('coordsList: ', coordsList);
resolve();
}
});
}));
Promise.all(geocodePromise).then(() => {
setCoordsList(coordsList);
setMapCenter(map, coordsList);
createMarkers(map, coordsList, markerImage, roadImage);
});
}, [ createMarkers, setMapCenter, setCoordsList ]);
이렇게 받아 사용하였고, 현재는 서버에 위도 경도를 저장하여 바로 위도 경도 값을 불러와 지오코딩 없이 사용 중입니다.
현재 서버에서 데이터를 불러오는 코드 입니다
// 지도 불러오기
const addAddresses = useCallback((map) => {
const imageSrc_road = ${process.env.REACT_APP_KAKAO_ROADIMG};
const roadImage = <img src="${imageSrc_road}" width="15" height="15">;
fetch('서버주소')
.then(response => response.json()) // JSON으로 변환된 데이터 반환
.then(data => {
const dataTable = JSON.parse(data.DataTable);
// console.log('Fetched data:', dataTable);
const coordsList = dataTable.map(item => {
const lat = parseFloat(item.latitude);
const lng = parseFloat(item.longitude);
const org_name = item.org_name;
if (isValidLatLng(lat, lng)) {
return { coords: new kakao.maps.LatLng(lat, lng), org_name };
} else {
console.error(`Invalid coordinates: ${lat}, ${lng}`);
return null;
}
}).filter(item => item !== null);
setCoordsList(coordsList);
setMapCenter(map, coordsList);
createMarkers(map, coordsList, roadImage);
})
.catch(error => {
console.error('fetch 에러', error);
});
// eslint-disable-next-line
}, [createMarkers,setMapCenter]);
