react로 카카오 지도 구현을 하는데 지도 로딩이 10초정도 발생하여 이 이슈를 해결할 방법이 있나 궁금해서 질문드립니다.
지도 관련 script태그는 body태그 맨 아래의 위치하였습니다
import React from "react";
import axios from "axios";
import MapCreate from "./MapCreate";
class Map extends React.Component {
constructor(props){ // MainPage 함수 (파라미터) , 클래스 (생성자) 에서 params를 받을 수 있다!!
super(props);
const { params } = props.match;
var id = params.id;
this.state = {
id : id,
loading : false,
AnimalPharmacyData: [
{
title: null,
lat: null,
lng: null
}
]
};
}
getLocation = async (id, n) => {
const {
data: { AnimalPharmacy }
} = await axios.get(
`https://openapi.gg.go.kr/AnimalPharmacy?KEY=33619ed306864d7c891cd56461d49da4&Type=json&pIndex=${n}&pSize=95`
);
const location = AnimalPharmacy[1].row;
const { AnimalPharmacyData } = this.state;
location.forEach(element => {
if(id === element.SIGUN_CD){
if(element.BSN_STATE_NM !== '폐업'){
this.setState({
AnimalPharmacyData : AnimalPharmacyData.concat({
title : element.BIZPLC_NM,
lat : element.REFINE_WGS84_LAT,
lng : element.REFINE_WGS84_LOGT,
})
})
}
}
return false;
});
if(n === 30){ // setStae를 하면 rendering 하기 때문에 데이터가 다들어온 뒤 loading을 true로 바꿔야한다.
this.setState({
loading : true
})
}
};
componentDidMount() {
const { id } = this.state;
for (var i = 1; i <= 30; i++) {
this.getLocation(id, i);
}
}
render() {
const { AnimalPharmacyData, loading } = this.state;
const { information } = this.props;
return(
loading ? <MapCreate AnimalPharmacyData={AnimalPharmacyData} information={information}/> : <h1>is loading...</h1>
)
}
}
export default Map;
import React from "react";
class MapCreate extends React.Component {
map;
maker;
infowindow;
infoMaker = () => {
const { information } = this.props;
information.forEach((element) => {
this.infowindow = new window.kakao.maps.InfoWindow({
map : this.map,
content : `<div style="padding:5px;">${element.name}</div><div style="padding:5px;">${element.tel}</div><div style="padding:5px;">${element.address}</div><div style="padding:5px;">${element.loadAddress}</div>`
})
})
}
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);
this.displayMaker();
this.setBound();
}
setBound = () => {
const { AnimalPharmacyData } = this.props;
let bounds = new window.kakao.maps.LatLngBounds();
for(var i=1; i<AnimalPharmacyData.length; i++){
bounds.extend(new window.kakao.maps.LatLng(AnimalPharmacyData[i].lat,AnimalPharmacyData[i].lng))
}
// 검색된 장소 위치를 기준으로 지도 범위를 재설정
this.map.setBounds(bounds);
}
componentDidMount() {
this.mapScript();
}
render() {
return (
<div style={{height:"100%"}}>
<p>MENU</p>
<div id="Mymap" style={{ width: "100%", height: "700px" }}></div>
</div>
)
}
}
export default MapCreate;