안녕하세요.
리엑트를 이용해서 카카오 지도를 구현하려는 도중에 문제가 발생하여 질문을 남깁니다.
제가 원하는 기능은 지도 범위 재설정 기능입니다. 범위 재설정 기능은 아래의 사진을 보고 참고하여 구현하였습니다.
아래와 같이 코드를 구성하였는데,
componentDidMount()에 setBound() 함수를 실행하면 지도가 나오지 않고 빈화면이 나옵니다.
setBound() 함수를 지우고 실행하면 지도 출력은 정상적으로 작동합니다.
콘솔 창에 나온 에러는 아래 사진 2장에 첨부합니다.
해결방안에 대해 첨언 부탁드립니다.
import React from "react";
class MapCreate extends React.Component {
map;
maker;
displayMaker = () => {
const { AnimalPharmacyData } = this.props;
AnimalPharmacyData.forEach((element) => {
new window.kakao.maps.Marker({
map: this.map,
position: new window.kakao.maps.LatLng(element.lat, element.lng),
title: element.title,
});
});
}
mapScript = () => {
const { AnimalPharmacyData } = this.props;
let container = document.getElementById("Mymap");
let option = {
center: new window.kakao.maps.LatLng(AnimalPharmacyData[1].lat, AnimalPharmacyData[1].lng),
level: 3,
};
this.map = new window.kakao.maps.Map(container, option);
}
setBound = () => {
const { AnimalPharmacyData } = this.props;
let bounds = new window.kakao.maps.LatLngBounds();
AnimalPharmacyData.forEach(element =>{
bounds.extend(new window.kakao.maps.LatLng(element.lat, element.lng));
})
console.log(bounds);
// 검색된 장소 위치를 기준으로 지도 범위를 재설정
this.map.setBounds(bounds);
}
componentDidMount() {
this.mapScript();
this.displayMaker();
this.setBound();
}
render() {
return (
<div>
<div id="Mymap" style={{ width: "100vw", height: "100vw" }}></div>
</div>
)
}
}
export default MapCreate;