지도 api clusterer 관련 질문입니다

지도/로컬 API
#1

다음 지도 클러스터러 중에
daum.maps.event.addListener(clusterer, ‘clustered’, function(clusters) {
// 클러스터 안의 갯수를 제가 원하는 데이터의 갯수와 기본 영역에 표시되는 갯수를 n/n처럼 보여주려고 사용하려고 합니다.
});

daum.maps.event.addListener(clusterer, ‘clusterclick’, function(clusters) {
// 해당 클러스터를 클릭하면… 커스텀오버레이를 이용해서 데이터를 보여주려고 하는데요…
});

각각 한개씩 적용하면… 잘 되는데… 두가지를 같이 사용하면… 클릭 이벤트가 먹지를 않네요…

이거 해결방법이 있을까요…?

부탁드립니다…

#2

http://apis.map.daum.net/web/documentation/#MarkerClusterer_clusterclick

문서에 보시면 clusterclick 이벤트를 동작하게 하려면
disableClickZoom 옵션을 true로 지정해야 합니다.

#3

답변 감사드립니다.
disableClickZoom : true 로 했구요…

각각 한개씩 이벤트를 걸면 잘 작동 하는데…

두개를 같이 쓰게 되면… clusterclick 이벤트가 먹지를 않네요…

더 자세히 얘기하면… clustered 이벤트에서… 클러스터 모양을 바꾸는 setContent 를 하면 안먹습니다…

대략의 구성은 이렇습니다…

감사합니다…

   daum.maps.event.addListener(clusterer, 'clusterclick', clickHandler);
   daum.maps.event.addListener(clusterer, 'clustered', clusteredHandler);

   var clusteredHandler = function(clusters) {
        for (var j = 0; j < clusters.length; j++) {
            var cluster = clusters[j];
            var clusterMarker = cluster.getClusterMarker();
            clusterMarker.setContent(' <div style="cursor: pointer;  width: 30px; height: 30px; background: rgba(51, 204, 255, 0.8); border-radius: 15px; color: rgb(0, 0, 0); text-align: center; font-weight: bold; line-height: 31px;">' + ' testText ' + '</div>');
        }
    };
    var clickHandler = function(cluster) {
        console.log(cluster);
    };
#4

더블 클릭의 이벤트 type은 clusterdb'l'click 입니다.
작성하신 타입의 철자을 다시 한 번 확인해 주세요 ^^;

#5

이거저거 해보다가 오타가 있었나보네요… 원래는 그냥 clusterclick 입니다… 소스 수정했어요…

#6

흐음… ㅠ 왜 안될까요. 제가 했을 때는 잘되는데…
저도 다시 확인해보겠습니다.

#7

해결 된 듯 합니다. 감사합니다~^^

1개의 좋아요
#8

아… 말씀하신게 맞네요… 제가 어설프게 해보고 답변드려서 죄송합니다.

Clusterer 내부에서도 cluster를 CustomOverlay를 써서 만들고 있어서
내부 content 자체를 변경하면
기존 content에 binding되어 있던 click이벤트 핸들러가 사라져 버립니다.

때문에 내부 컨텐츠를 변경하시게 되면
해당 컨텐츠마다 클릭 이벤트를 따로 걸어주셔야 합니다.

#9

아… 해결하셨다면 다행입니다.

#10

해결하긴 했는데… 말씀해주신

때문에 내부 컨텐츠를 변경하시게 되면
해당 컨텐츠마다 클릭 이벤트를 따로 걸어주셔야 합니다.

이 방법은 어떻게 개별로 거는지 알 수 있을까요?

#11 
daum.maps.event.addListener(clusterer, 'clustered', clusteredHandler);

var clusteredHandler = function(clusters) {
    for (var j = 0; j < clusters.length; j++) {
        var cluster = clusters[j];
        var clusterMarker = cluster.getClusterMarker();
        var content = document.createElement('div');
        content.style.cssText = "cursor: pointer;  width: 30px; height: 30px; background: rgba(51, 204, 255, 0.8); border-radius: 15px; color: rgb(0, 0, 0); text-align: center; font-weight: bold; line-height: 31px;";
        var text = document.createTextNode('testText');
        content.appendChild(text);
        content.onclick = (function(cluster) {
            return function() {
                console.log('cluster click', cluster);
            };
        })(cluster);

        clusterMarker.setContent(content);
    } 
};

이렇게 매 for문마다 걸어주셔야 합니다.
위 과정을… dom 관련 라이브러리를 쓰면 더 간결해 질 수 있고요.
for문 내부에서 onclick 이벤트에 cluster를 넘기기 위해서는 불가피하게 클로저를 사용해야 했지만
clusters를 forEach로 돈다면 필요없는 기법이긴 합니다.

1개의 좋아요
#12

아 감사합니다.

더 좋아졌네요… ㅎㅎ

고생이 많으십니다~~~!!!

1개의 좋아요