마커 클러스터러 커스텀 사용 문의

지도/로컬 API
1

안녕하세요.
클러스터링이 완료됐을 때 마커의 배경을 제가 원하는 이미지로 커스텀할 수 있는지 궁금하여 문의드립니다.!

image
image1356×612 128 KB

위 이미지 처럼 클러스터링 됐을 때 배경을 아래 인스타 처럼 이미지를 두고 마커 개수를 이미지 위에 올릴 수 있나요??
KakaoTalk_Photo_2023-10-31-13-52-41
KakaoTalk_Photo_2023-10-31-13-52-41665×1440 194 KB

감사합니다~!!

2

clusterer.setStyles(styles); API를 이용해서 클러스터에 스타일을 적용할 수 있습니다.
문서 참고해주세요.
https://apis.map.kakao.com/web/documentation/#MarkerClusterer_setStyles

3

감사합니다!

4

말씀주신 setStyles를 사용하면 고정된 이미지가 나오게 되는데, 혹시 클러스터링 되는 데이터 중에 하나의 이미지를 backgroundImage로 설정하고 싶습니다.

image
위 이미지 처럼 클러스터링 된 데이터 중에 하나의 이미지를 보여지도록 구현하고 싶습니다!!

5

마커 클러스터링은 커스텀 오버레이로 구현되어 있어 오버레이에 직접 스타일을 설정할 수 있습니다.
클러스터링이 완료된 후 각 클러스터러의 오버레이에 스타일 속성을 설정해주세요.

//클러스터링이 완료되었을 때 발생하는 이벤트 
kakao.maps.event.addListener( clusterer, 'clustered', function( clusters ) {
    clusters.forEach(cluster => {
        const clusterOverlay = cluster.getClusterMarker(); //마커 클러스터 오버레이
        const content = clusterOverlay.getContent();
        content.style.background = 'url(“”)' //클러스터러에 적용할 배경 스타일을 설정해주세요. backend외 style 속성도 설정 가능합니다.
    });
});

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

6

감사합니다!!

1개의 좋아요