지도 클러스터러를 하고자 하는데 어떻게 적용을 해야하나요?

지도/로컬 API
#1

========================================================================
// 여러개의 마커에 각기 다른 내용으로 인포윈도우 띄우기

daum.maps.event.addListener(map, ‘idle’, function() {
var latlng = map.getCenter();
var bounds = map.getBounds();
var swLatLng = bounds.getSouthWest();
var neLatLng = bounds.getNorthEast();
var level = map.getLevel();

$.get("/coordinate.php", function(data) {

for(var i=0; i < data.positions.length;i++){

			(function(i){ //클로저
				var subcnt = parseInt(data.positions[i].count);	

				var tempMarkers = new daum.maps.Marker({
					map : map,
					position: new daum.maps.LatLng(data.positions[i].lat, data.positions[i].lng),
					image : icon_type[type]
				})
				
				var inFocontent = '<div style="width:240px; height:120px; border:1px solid #06C; padding:10px;-moz-box-sizing: border-box; -webkit-box-sizing: border-box;    box-sizing: border-box; font-size:11px; position:relative;overflow-y:auto;overflow-x:hidden;">인포윈도우</div>';	

			
				var tempinfo = new daum.maps.InfoWindow({
					content: inFocontent, // 인포윈도우에 표시할 내용
					removable: true,
					zIndex:2
				});

				infowindows.push(tempinfo);
				daum.maps.event.addListener(tempMarkers, 'click', makeOverListener(map, tempMarkers, tempinfo));
				daum.maps.event.addListener(map, 'idle', function(){
					CloseOverListener(map, tempMarkers, tempinfo);
				});					
			})(i);
		}
});

});

========================================================================
//클러스터러 적용하기
$(function() {
var latlng = map.getCenter();
var bounds = map.getBounds();
var swLatLng = bounds.getSouthWest();
var neLatLng = bounds.getNorthEast();
var level = map.getLevel();
$.get("/coordinate.php", function(data) {
// 데이터에서 좌표 값을 가지고 마커를 표시합니다
// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다

     var markers = $(data.positions).map(function(i, position) {
        return new daum.maps.Marker({
            position : new daum.maps.LatLng(position.lat, position.lng)
        });
    });

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

})

이런식으로 지도에 여러개의 마커를 띄우고 마커를 클릭했을 때 인포윈도우를 띄우는 것 까지는 잘 처리되었습니다.
다만 마커가 너무 많이 보여서 (수백개가 한화면에 조회되는 상황)
클러스터러를 적용하려하는데 어렵네요 ㅠㅠ

그냥 클러스터러만 적용하려면 하겠는데 각각 마커마다 다른 인포윈도우를 띄우면서 클러스터러를 적용하려니
되질 않습니다.

첨부한 소스는 인포윈도우 용과 클러스터용 2가지 입니다.
두가지를 적절히 섞어야 할 텐데
방법좀 알려주세요

날씨가 덥네요 건강 조심들하세요^^

#2

클러스터러 적용하기 코드를 아래와 같이 변형해서 사용하시면 될겁니다.

var markers = $(data.positions).map(function(i, position) {
    var marker = new daum.maps.Marker({
        position : new daum.maps.LatLng(position.lat, position.lng)
    });

    // 마커를 클릭했을 때 띄울 인포윈도우를 만듭니다.
    // 필요에 따라 content 및 관련 이벤트를 구현해 줍니다.
    var info = new daum.maps.InfoWindow({ ... });

    // 여기서 마커에 이벤트를 걸어줍니다.
    daum.maps.event.addListener(marker, 'click', function() {
        info.open(map, marker);
    });
    
    return marker;
});

clusterer.addMarkers(markers);
#4

감사합니다. 해결했습니다^^

1개의 좋아요