Cluster 에 마우스오버시 css

카카오맵 API (지도/로컬)
,
6

확인해보니 클러스터러 내부가 CustomOverlay로 생성이 되어서 각 cluster 스타일 변경이 가능하네요.

cluster.getClusterMarker(); 를 호출하여 클러스터러 오버레이의 content를 수정하면 됩니다.
제가 아래 작성한 코드대로 div를 새로 생성하여 content를 재지정 또는 style을 변경하여 사용하시면 됩니다.

아래 코드도 참고해주세요.

var temp = null; // 기존 content를 담는 변수

kakao.maps.event.addListener( clusterer, 'clusterover', function( cluster ) { //클러스러터 마우스 오버 이벤트  
    temp = cluster.getClusterMarker().getContent();
    
    // 변경하려는 div 선언
    var content = "<div style='cursor: pointer; width: 52px; height: 52px; border-radius: 52px; border: 1px solid #1a86ae; background-color:white; line-height: 52px; font-size: 14px; text-align: center; font-weight: bold;'>"+cluster.getSize()+"</div>";
    cluster.getClusterMarker().setContent(content);
});

kakao.maps.event.addListener( clusterer, 'clusterout', function( cluster ) { // 클러스터러 마우스 아웃 이벤트
    // 마우스 아웃 시 기존 content로 변경
    if(temp) {
        cluster.getClusterMarker().setContent(content);
    }
});