지도 클러스터에서 추가한 클러스터를 다시 없애는 방법을 알고 싶습니다

지도/로컬 API
#1

안녕하세요! 도와주세요!

지도 클러스터를 아래와 같이 만들어봤습니다.

메뉴1번 체크박스를 눌러서 체크를 넣으면 클러스터가 추가되고,

다시 눌러서 끄면 clusterer.clear();로 모든 클러스터가 지워집니다.

그런데 제가 만들고 싶은 기능은

클러스터를 싹 다 지우는 게 아니라

메뉴 1번 체크박스를 눌러서 체크를 해체하면

clusterer.removeMarkers(markers_menu_01); 을 이용해서 해당 클러스터러만 없애고 싶은 거여요.

메뉴 2번 체크박스가 체크 되어있으면 그건 남아있게요!

너무 안돼서 기절할 것 같아요. 도와주세요…

		<label class="container">메뉴1
		<input type="checkbox" id="menu_01" onclick="menu_01_on_off()">
		<span class="checkmark"></span>  
		</label>

		<label class="container">메뉴2
		<input type="checkbox" id="menu_02" onclick="menu_02_on_off()">
		<span class="checkmark"></span>  
		</label>

	// 기본 지도를 생성
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
		mapOption = 
		{ 
			center: new daum.maps.LatLng(35.91261986853997, 128.0006305931068), // 지도의 중심좌표
			level: 13 // 지도의 확대 레벨
		}; 

	var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다






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


	    function menu_01_on_off() {
		
		var check = document.getElementById("menu_01");
		
		if (check.checked)
			{
				$.get("http://masamap.com/map/data01.php", function(data_menu_01)
					{
						var markers_menu_01 = $(data_menu_01.positions).map(function(i, position)
							{
								var marker = new daum.maps.Marker(
								{
									map: map,
									position : new daum.maps.LatLng(position.lat, position.lng)
								});
							
			

								// 인포윈도우 관련
								var iwContent = '<div style="margin:5px 25px 5px 5px; width:150px; height:95px; font-size:12px">'+'관리번호 : '+position.number+'<br>'+'<div style="margin-top:20px; font-size:16px; font-weight:bolder">'+
										'   <a href="' + position.roadview + '" target="_blank">로드뷰 보기</a>'+'<div style="margin-top:20px; font-size:12px; font-weight:normal">'+'문의연락처 : '+position.tel,
									iwRemoveable = true;
				
				

								var infowindow = new daum.maps.InfoWindow(
									{
										content : iwContent,
										removable : iwRemoveable
									});
					

								daum.maps.event.addListener(marker, 'click', function()
									{

										infowindow.open(map, marker);  
									});				
									
								return marker;
					
							});
					
						
						clusterer.addMarkers(markers_menu_01);   
					});
			
			}
			else{clusterer.clear();}
		}



	    function menu_02_on_off() {동일 방법으로 반복...}
#2

생성한 마커들을 관리할 수 있는 전역 변수를 선언해주세요.
체크가 되어 있다면 전역 변수에 생성한 마커를 담아주고,
체크가 해제되었다면 마커 정보를 담고 있는 전역 변수를
clusterer.removeMarkers() API 파라미터로 넘기면 마커가 제거됩니다.

var markerMenu01 = [];
var markerMenu02 = [];

if (check.checked) {
    //….
    markerMenu01 = markers_menu_01;
} else {
    clusterer.removeMarkers(markerMenu01);
    markerMenu01 = [];
}
1개의 좋아요
#3

우와우와와!!!

잘돼요!!!

최고최고! 너무너무 감사합니다!!!

:joy:

1개의 좋아요
#4

저도 비슷한 기능을 시도하고 있는데 아래 코드와 같이 수정하신게 맞나요?

var markerMenu01 = [];
var markerMenu02 = [];



  if (check.checked) {
      //...

        return marker;
      });
      markerMenu01 = markers_menu_01;
      clusterer.addMarkers(markerMenu01);
    });
  } else {
    clusterer.removeMarkers(markerMenu01);
    markerMenu01 = [];
  }
}
#5

안녕하세요!

한참 기다리셨죵?! 밖에 있어서 답변이 늦었네용!

저는 이렇게 했어용!

아래랑 똑같이 하시면 될 거에용!

lea.ju 복숭아 관리자님 아니었으면 혼자서 한 달 고민해도 못할 뻔 했네용!

다음 카카오 최곤 거 같아용!

화이팅!

<div class="category">
		<label class="container">메뉴1
		<input type="checkbox" id="menu_01" onclick="menu_01_on_off()">
		<span class="checkmark"></span>  
		</label>
</div>

<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=앱키&libraries=services,clusterer"></script>



<script>
	
	// 기본 지도를 생성
	var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
		mapOption = 
		{ 
			center: new daum.maps.LatLng(35.91261986853997, 128.0006305931068), // 지도의 중심좌표
			level: 13 // 지도의 확대 레벨
		}; 

	var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다



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



	    function menu_01_on_off() {
		
		var check = document.getElementById("menu_01");
		
		
		
		if (check.checked)
			{

				$.get("http://masamap.com/map/data.php", function(data_menu_01)
					{

						var markers_menu_01 = $(data_menu_01.positions).map(function(i, position)
							{
								var marker = new daum.maps.Marker(
								{
									map: map,
									position : new daum.maps.LatLng(position.lat, position.lng)
								});
							
																
								return marker;
					
							});
						
						 markerMenu01 = markers_menu_01;
						clusterer.addMarkers(markerMenu01);							 
					});
			
			}
			
			else{
					clusterer.removeMarkers(markerMenu01);
					markerMenu01 = [];}
			
		}

</script>
1개의 좋아요
#6

data.php 에는 아래와 같이 넣어놨어용!

<?php header('Content-Type: application/json'); die('{ "positions": [ { "number":"000-00001", "tel":"02-1000-1000", "lat": 37.48517001839495, "lng": 126.91605039110644 }, { "number":"000-00002", "tel":"02-1000-1000", "lat": 37.485852890476295, "lng": 126.91980914673638 } ] }');