지도 영역안의 마커만 불러와서 클러스터링

지도/로컬 API
#1

안녕하세요!

항상 도움 주셔서 감사합니다.

저번에도 도와주셔서 클러스터 기능을 대단히 유용하게 잘 사용하고 있습니다.

그런데 제가 가지고 있는 json에 주소가 수천개가 되다 보니 지도에 마커를 찍고 클러스터로 표시하는데에 시간이 매우 많이 걸리고 있습니다.

그래서 지도 레벨의 축소에 제한을 건 다음, idle 기능을 이용하여 축소 확대 또는 중심 좌표 변동시,

바뀐 지도 영역 안에 존재하는 마커들에 대해서만 데이터를 가져와서 클러스터 표시를 하려고 합니다.

지도 레벨의 축소 제한은 하였읍니다만 영역 안에 존재하는 마커들만 가져와서 클러스터 표시하는 방법을 모르겠습니다.

며칠 동안 검색하면서 다른 분들의 질문과 bounds 도큐맨트 등을 여러번 읽어 보았으나 실제 적용에 어려움을 겪고 있습니다.

도움을 부탁드리겠습니다…

현재 아래와 같이 사용하고 있습니다.

	    // 스위치가 눌러질 때
	    function switch() {
	
		var check = document.getElementById("switch_checkbox");
		
		if (check.checked) // 스위치가 on이 되었으면
			{
				$.get("data.json", function(data_switch) //data.json을 불러와서 data_switch 라고 지정한다
					{
						// 데이터에서 좌표 값을 가지고 마커를 표시합니다
						// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
						var markers_switch_checkbox = $(data_switch.positions).map(function(i, position)
							{
								var marker = new daum.maps.Marker(
								{
									map: map,
									position : new daum.maps.LatLng(position.lat, position.lng)
								});
											
									
								return marker;
					
							});
					
						// 클러스터러에 마커들을 추가합니다
						
						 markerMenu = markers_switch_checkbox;
						clusterer.addMarkers(markers_switch_checkbox);							 
					});
			
			}
			
			else{
					clusterer.removeMarkers(markerMenu);
					markerMenu = [];}
			
		}
#2

마커를 저장한 배열을 순회하면서
마커 좌표가 영역 내에 포함하는지 체크해주세요.
bounds.contain(marker.getPosition());

https://apis.map.kakao.com/web/documentation/#LatLngBounds_contain

1개의 좋아요
#3 
kakao.maps.event.addListener(map, 'idle', function()
{

	var bounds = map.getBounds();


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

			var markers_switch_checkbox = $(data_switch.positions).map(function(i, position)
			{		
				for (var i = 0; i < data_switch.positions.length; i ++)
				{
					if(bounds.contain(new daum.maps.LatLng(data_switch.positions[i].lat, data_switch.positions[i].lng)))
					{
						var marker = new daum.maps.Marker(
						{
							map: map,
							position : new daum.maps.LatLng(data_switch.positions[i].lat, data_switch.positions[i].lng)
						});			
					}		
				}	
				return marker;
			});
						
			clusterer.clear();
			markerMenu = markers_switch_checkbox;
			clusterer.addMarkers(markerMenu); 
		});
			
});

안녕하세요!

이렇게 해서 작동이 되어요.

마커가 없는 쪽으로 지도를 움직이면 마커를 안만들고요 마커가 있는 쪽으로 지도를 움직이면 마커를 만들어요.

그런데 마커가 있는 쪽으로 움직이면 마커가 막 우다다다다!!! 들어가서 한 지점에 한개씩이 아니라 배열 도는 만큼 생셩시켜 버리는 것 같아요…

제가 또 뭘 잘못한걸까요…

한 번만 더 가르쳐주시면 이제 더 안물어볼게요. 죄송해요…

#4

저 햇어요! 했어요!!!

이제 돼요!

감사합니다!!!

잘 돼서 너무 좋아요!

:joy::rofl::laughing:

kakao.maps.event.addListener(map, 'idle', function()
{
	var mark = [];
	var mark2 = [];
	var bounds = map.getBounds();
	
		$.get("data.json", function(data_switch)
		{

			var markers_switch_checkbox = $(data_switch.positions).map(function(i, position)
			{		

					if(bounds.contain(new daum.maps.LatLng(data_switch.positions[i].lat, data_switch.positions[i].lng)))
					{
						mark2.push(new daum.maps.LatLng(data_switch.positions[i].lat, data_switch.positions[i].lng));
					}	
			});
			
			//alert(mark2)
			
			var re_mark = $(mark2).map(function(i)
			{		
				var marker = new daum.maps.Marker(
					{
						map: map,
						position : mark2[i]
					}
			);
			
				return marker;
			});
						
			clusterer.clear();
			markerMenu = re_mark;
			clusterer.addMarkers(markerMenu); 
		});
			
});
1개의 좋아요