넵! 추가하였습니다. 하기는 리액트로 구현한 클러스터 부분입니다.
참고한 대부분의 블로그에서 클러스터 부분을 js 파일을 이용해 직접 import해서 진행한 형식이라 저도 동일하게 진행하였습니다.
js 파일로 인해 원하는 기능이 나타나지 않는것으로 현재 짐작하고 있기는 합니다ㅠ 수정해보려고 했는데 조금 막막하더라고요.
추가적으로 filterShops의 경우 쿼리로 받은 데이터 값입니다. naver.maps.Marker 타입이 없기 때문에 markerArray로 새롭게 반환하는 과정을 거치게 되었습니다.
// 클러스터 함수
import { useEffect, useState } from 'react';
import { ClusterHtml } from 'pages/Home/Map/components/MarkerHtml/index';
import MarkerClustering from 'utils/js/MarkerClustering';
interface ClusterProps {
markerArray: (naver.maps.Marker | undefined)[];
map: naver.maps.Map | null;
}
const HTMLMARKER = {
content: ClusterHtml(),
size: new naver.maps.Size(40, 40),
anchor: new naver.maps.Point(20, 20),
};
function useCluster({ markerArray, map }: ClusterProps) {
const [cluster, setCluster] = useState<MarkerClustering | null>(null);
useEffect(() => {
if (map && markerArray.length > 0) {
const markerClustering = new MarkerClustering({
minClusterSize: 2,
maxZoom: 20,
map,
markers: markerArray,
disableClickZoom: false,
gridSize: 120,
icons: [HTMLMARKER],
indexGenerator: [120],
stylingFunction: (clusterMarker: any, count: number) => {
if (clusterMarker) {
const firstChild = clusterMarker.getElement().querySelector('div:first-child');
if (firstChild) {
firstChild.innerHTML = count;
}
}
},
});
setCluster(markerClustering);
}
}, [map, markerArray]);
return { cluster };
}
export default useCluster;
// 지도 및 마커 클러스터를 표시하는 컴포넌트
import { useLocation } from 'store/location';
import useMarker from 'utils/hooks/useMarker';
import useNaverMap from 'utils/hooks/useNaverMap';
import styles from './Map.module.scss';
export default function Map(): JSX.Element {
const { location } = useLocation();
const map = useNaverMap(location?.lat, location?.lng); // 지도 표시
const { markerArray } = useMarker({ map, filterShops }); // 마커 표시
useCluster({ markerArray, map }); // 마커 클러스터 부분
return (
<>
<div id="map" className={styles.map}>
{!location && <div className={styles.loading}><LoadingIcon /></div>}
</div>
</>
);
}
