클러스터 컴포넌트안에 마커를 넣어서 클러스터 생성까지 완료하였습니다.
하지만
클러스터 클릭 시 클러스터 내부 데이터를 가져오고 싶은데 어떻게 해야 하는지 알고 싶습니다.
원하는 데이터: 클러스터 안에 마커의 정보(ex: 위도경도, 건물이름…)
코드는 react-kakao-maps와 같은 형태로 사용중입니다.
return (
<Map
center={{
lat: 37.4946012,
lng: 127.027561
}}
style={{ width: "100%", height: "100%", maxHeight: "905px", maxWidth: "1415px" }}
level={8}
minLevel={2}
>
<MarkerClusterer
gridSize={80}
averageCenter={true}
minLevel={2}
calculator={[5, 10, 20]} // 클러스터의 크기 구분 값, 각 사이값마다 설정된 text나 style이 적용된다
styles={[{ // calculator 각 사이 값 마다 적용될 스타일을 지정한다
width: '100px', height: '100px',
background: 'rgba(255, 173, 49, .3)',
borderRadius: '100px',
border: 'solid 3px rgba(255, 173, 49)',
color: 'rgba(255, 173, 49)',
textAlign: 'center',
fontWeight: 'bold',
fontSize: '20px',
lineHeight: '100px'
},
{
width: '100px', height: '100px',
background: 'rgba(255, 123, 0, .3)',
borderRadius: '100px',
border: 'solid 3px rgba(255, 123, 0)',
color: 'rgba(255, 153, 0)',
textAlign: 'center',
fontWeight: 'bold',
lineHeight: '100px'
},
{
width: '100px', height: '100px',
background: 'rgba(255, 123, 49, .3)',
borderRadius: '100px',
border: 'solid 3px rgba(255, 123, 49)',
color: 'rgba(255, 123, 49)',
textAlign: 'center',
fontWeight: 'bold',
lineHeight: '100px'
}
]}
disableClickZoom={true}
onClusterclick={test}
>
{state.map((marker) => (
<MapMarker
key={marker.idx}
position={{
lat: marker.lat,
lng: marker.lng
}}
clickable={true}
onClick={() => {
openModal()
setSendData(marker, marker.idx)
}}
image={{
src: SearchMarker,
size: {
width: 60,
height: 50,
},
options: {
offset: {
x: 30,
y: 45,
},
},
}}
/>
))}
<ItemDetailMarker open={modalOpen} close={closeModal} ItemData={sendData} />
</MarkerClusterer>
</Map >
);