// 키워드로 장소를 검색하고 마커를 생성합니다
const onSubmit = () => {
const { keyword } = getValues();
const ps = new kakao.maps.services.Places();
ps.keywordSearch(keyword, (data, status, _pagination) => {
if (status === kakao.maps.services.Status.OK) {
const bounds = new kakao.maps.LatLngBounds();
let markers = [];
for (var i = 0; i < data.length; i++) {
// @ts-ignore
markers.push({
position: {
lat: data[i].y,
lng: data[i].x,
},
content: data[i].place_name,
});
// @ts-ignore
bounds.extend(new kakao.maps.LatLng(data[i].y, data[i].x));
}
setMarkers(markers);
map.setBounds(bounds);
}
});
};
return (
<Map
center={{
lat: 37.566826,
lng: 126.9786567,
}}
style={{
width: "100%",
height: "100%",
}}
level={3}
onCreate={setMap}
>
<MarkerClusterer
averageCenter={true}
minLevel={2}
>
{markers.map((marker, index) => (
<MapMarker
key={index}
position={marker.position}
onMouseOver={() => setInfo(marker)}
onMouseOut={() => setInfo(null)}
>
{info && info.place_name === marker.place_name && (
<div style={{ color: "#000" }}>{marker.place_name}</div>
)}
</MapMarker>
))}
</MarkerClusterer>
</Map>
);
onSubmit 함수가 실행되면 검색된 결과를 바탕으로 마커가 생성되는데 첫번째 사진처럼 클러스터러만 보이고 마커가 함께 보이지 않습니다. 마우스 휠로 줌 크기를 변경하는 순간 마커가 보이기 시작합니다. 줌 크기를 바꿨다 돌아오면 마커가 보이므로 마커가 없어서 안보이는 것은 아닐텐데 왜 처음엔 보이지 않는것일까요?