다중 클러스터를 생성하여 각각의 클러스터에 동이름을 추가하고 싶습니다

지도/로컬 API
#1

현재 발생되는 이슈는 화면에는 다중 cluster가 보여지나 각각의 클러스터에 customOverlay를 적용할 수 없다는 것입니다.

모든 클러스터에 customOverlay를 지정하고 싶습니다.

  // FIXME: 초기화면 => 줌 6, 클러스터
  onMount(() => {
    mapOption = {
      center: new kakao.maps.LatLng(latitude, longitude),
      level: INIT_ZOOM_LEVEL,
    };

    map = new kakao.maps.Map(mapContainer, mapOption);

    const getClusterCount = (count: number) => `${count}`;
    const styledDongName = `<div class ="mb-20"><span class="text-neutral-900 text-sm font-semibold leading-tight">${dongName}</span></div>`;

    clusters = new kakao.maps.MarkerClusterer({
      map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
      texts: getClusterCount,
      averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
      minLevel: 4, // 클러스터 할 최소 지도 레벨
      styles: [
        {
          display: 'flex',
          width: '56px',
          height: '56px',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: 'rgba(12, 12, 12, 0.2)',
          borderRadius: '100px',
          border: '1px solid  rgba(12, 12, 12, 0.7)',
          color: 'text-zinc-950',
          textAlign: 'center',
          fontWeight: 'semi-bold',
        },
      ],
    });

    const clusterMarkers = cameraList.map(
      (camera) =>
        new kakao.maps.Marker({
          position: new kakao.maps.LatLng(camera.lat, camera.lng),
        }),
    );

    clusters.addMarkers(clusterMarkers);

    // FIXME: 위치 수정 필요
    // TODO: 다중 Cluster
    const clusterPosition = clusters.getMap()?.getCenter() as kakao.maps.LatLng;

    console.log(clusterPosition);

    if (clusterPosition) {
      const customOverlay = new kakao.maps.CustomOverlay({
        position: clusterPosition,
        content: styledDongName,
      });

      customOverlay.setMap(map);
    }

    // FIXME: 줌이 6, 5, 4일 경우에만 노출
    // TODO: 생성된 클러스터 위치 위에 content추가 필요
  });
</script>

image
image964×1242 181 KB

#2

클러스터링이 완료된 클러스터 객체를 활용해서 커스텀 오버레이를 생성하면 모든 클러스터에 오버레이를 올릴 수 있습니다.

kakao.maps.event.addListener( clusterer, 'clustered', function( clusters ) {
    for(let i=0; i<clusters.length; i++) {
        let clusterCenter = clusters[i].getCenter(); //i번째 클러스터러의 위치
        //TODO: 커스텀 오버레이를 생성해주세요. 
       //해당 이벤트는 클러스터링이 완료될 때마다 실행되기 때문에 이전에 생성됐던 커스텀 오버레이는 삭제해주셔야 합니다,
    }
});

https://apis.map.kakao.com/web/documentation/#MarkerClusterer_clustered