클러스터러에 마커들을 추가 후 제거할시

지도/로컬 API
#1

지도/로컬 API에 대한 문의게시판입니다.
체크박스로 클러스터를 맵에 그리고 제거하는 작업을 하고 싶은데

$(function() {
// var map = new kakao.maps.Map(document.getElementById(‘map’), { // 지도를 표시할 div
// center : new kakao.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표
// level : 14 // 지도의 확대 레벨
// });

// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 2 // 클러스터 할 최소 지도 레벨
});

// 데이터를 가져오기 위해 jQuery를 사용합니다
// 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
$.get(“download/Resident_Report.json”, function(data) {
// 데이터에서 좌표 값을 가지고 마커를 표시합니다
// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
var markers = $(data.positions).map(function(i, position) {
return new kakao.maps.Marker({
position: new kakao.maps.LatLng(position.lat, position.lng)
});
});

// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);

});
});

클러스터를 생성하고

clusterer.setMap(null);

$("#reportCheckBox").click(function(){
if (reportCheckBox.checked == true) {
//console.log(“체크됨”);
clusterer.setMap(map);
} else if (reportCheckBox.checked == false) {
clusterer.setMap(null);

  }

});

처음 null인 상태로 뜨고 , 그다음 체크를 누르면 맵에 클러스터가 나타나는데… 체크 해제를 했을 때
클러스터가 제거가 되지 않습니다… 다른 방법이 있을까요…

항상 친절한 답변 감사드립니다…

#2

음 클러스터러에는 setMap 메쏘드가 가이드에 없는데요…
setMap(map)은 동작하긴 하네요

이건 @lea.ju 가 추가로 도움을 주실 수 있을 듯합니다.

#3

클러스터러는 clusterer.clear(); API를 호출하여 지우고 다시 그려주어야 합니다.

아래 예제 코드 참고해주세요.

<div id="map" style="width:100%;height:350px;"></div>
<button onclick="toggle()">클러스터 on/off</button>

<script>
var map = new kakao.maps.Map(document.getElementById('map'), { // 지도를 표시할 div
    center : new kakao.maps.LatLng(36.2683, 127.6358), // 지도의 중심좌표 
    level : 14 // 지도의 확대 레벨 
});

// 마커 클러스터러를 생성합니다 
var clusterer = new kakao.maps.MarkerClusterer({
    map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체 
    averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정 
    minLevel: 10 // 클러스터 할 최소 지도 레벨 
});

// 클러스터러 on/off 상태를 담은 변수
// false - off, true - on
var show = false;

//clusterer on/off 함수를 실행합니다.
toggle();


function drawClusterer() {    
    // 데이터를 가져오기 위해 jQuery를 사용합니다
    // 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
    $.get("/download/web/data/chicken.json", function(data) {
        // 데이터에서 좌표 값을 가지고 마커를 표시합니다
        // 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
        var markers = $(data.positions).map(function(i, position) {
            return new kakao.maps.Marker({
                position : new kakao.maps.LatLng(position.lat, position.lng)
            });
        });
        
        // 클러스터러에 마커들을 추가합니다
        clusterer.addMarkers(markers);
    });
}

function toggle() {
    // show 상태값에 따라 cluster를 지우고 다시 그립니다.        
    if(!show){ // off -> on
        show = true;
        drawClusterer();
        return;
    } 
    
    //on -> off
    show = false;        
    clusterer.clear();
}