마커 클러스터러를 커스텀 가능한가요?

카카오맵 API (지도/로컬)
1

다방에서 마커 클러스터러를 사진과 같이 보여주는데 카카오맵 api로 마커 클러스터러를 사진과 같이 커스텀 가능한가요?

image

https://www.dabangapp.com/search/map?filters={"multi_room_type"%3A[0%2C1%2C2]%2C"selling_type"%3A[0%2C1%2C2]%2C"deposit_range"%3A[0%2C999999]%2C"price_range"%3A[0%2C999999]%2C"trade_range"%3A[0%2C999999]%2C"maintenance_cost_range"%3A[0%2C999999]%2C"room_size"%3A[0%2C999999]%2C"supply_space_range"%3A[0%2C999999]%2C"room_floor_multi"%3A[1%2C2%2C3%2C4%2C5%2C6%2C7%2C-1%2C0]%2C"division"%3Afalse%2C"duplex"%3Afalse%2C"room_type"%3A[1%2C2]%2C"use_approval_date_range"%3A[0%2C999999]%2C"parking_average_range"%3A[0%2C999999]%2C"household_num_range"%3A[0%2C999999]%2C"parking"%3Afalse%2C"short_lease"%3Afalse%2C"full_option"%3Afalse%2C"built_in"%3Afalse%2C"elevator"%3Afalse%2C"balcony"%3Afalse%2C"safety"%3Afalse%2C"pano"%3Afalse%2C"is_contract"%3Afalse%2C"deal_type"%3A[0%2C1]}&position={"location"%3A[[126.8280437%2C37.3542242]%2C[127.1298244%2C37.66578]]%2C"center"%3A[126.9789341%2C37.5101647]%2C"zoom"%3A12}&search={"id"%3A""%2C"type"%3A""%2C"name"%3A""}&tab=all

2

마커 클러스터의 styles 옵션으로 스타일을 적용할 수 있습니다.

 let clusterer = new kakao.maps.MarkerClusterer({
    map: map,
    averageCenter: true,
    minLevel: 10,
    styles: [{
        minWidth: '30px',
        height: '30px',
        padding: '0px 6px',
        color: 'rgb(255, 255, 255)',
        fontSize: '12px',
        lineHeight: '26px',
        textAlign: 'center',
        border: '2px solid rgb(50, 108, 249)',
        borderRadius: '30px',
        backgroundColor: 'rgb(50, 108, 249)',
        whiteSpace: 'nowrap',
        position: 'relative',
        zIndex: '2'
    }]
});

만약 클러스터 구조를 변경하려면 마커 클러스터링이 완료될 때 각 클러스터 오버레이의 content를 재설정해주세요.
단, 이 경우는 클러스터에 제공되는 이벤트는 사용이 불가능해지기 때문에
새로 적용할 content element에 직접 이벤트를 등록해야 합니다.
(커스텀 오버레이 이벤트 적용 방법과 동일)

kakao.maps.event.addListener( clusterer, 'clustered', function( clusters ) {
    clusters.forEach((cluster) => {
        console.log(cluster.getClusterMarker().getContent()); // 클러스터 오버레이 출력
    }
});

https://apis.map.kakao.com/web/documentation/#MarkerClusterer
https://apis.map.kakao.com/web/documentation/#MarkerClusterer_clustered
https://apis.map.kakao.com/web/documentation/#Cluster_getClusterMarker
https://apis.map.kakao.com/web/documentation/#CustomOverlay
https://apis.map.kakao.com/web/documentation/#CustomOverlay_setContent