Cluster 데이터

카카오맵 API (지도/로컬)
1

기본 마커는 값이 잘 나오는데
클러스터에 있는거는 자꾸 전체값을 뿌리는데;; 어떻게 처리해야되나여…?

갯수랑 다른거는 전부 잘 나오는데… context값만 잘 나오면 다 끝나는건데… 뭐가문제인지 모르겠네요,
/<![CDATA[/

    /*[# th:each="frc : ${frcsList}"]*/
    var position = {
        title: /*[[${frc.frcName}]]*/,
        content: '<div style="max-width: 200px; padding: 4px 8px 6px;"><span style="display: inline-block; font-size: 14px; font-weight: 700;">' + [[${frc.frcName}]] + '</span><br/><span style="display: inline-block; margin-top: 4px; font-size: 12px; line-height: 1.2;">' + [[${frc.addr}]] + '</span></div>',
        // content: html,
        latlng: new kakao.maps.LatLng(/*[[${frc.lat}]]*/, /*[[${frc.lon}]]*/)
    }

    positions.push(position);

    // setPosition(/*[[${frc.frcName}]]*/, /*[[${frc.lat}]]*/, /*[[${frc.lon}]]*/);
    /*[/]*/
    var html = '<div style="max-width: 200px; padding: 4px 8px 6px; overflow-y: scroll; width: auto; height: 300px;">'
    /*[# th:each="frc : ${frcsList}"]*/
    html += '<div style="border-top: solid 0.5px #e4e4e4; padding: 0px 0px 16px 0px;"><span style="display: inline-block; font-size: 14px; font-weight: 700;">' + [[${frc.frcName}]] + '</span><br/><span style="display: inline-block; margin-top: 4px; font-size: 12px; line-height: 1.2;">' + [[${frc.addr}]] + '</span></div>';
    var clusterPosition = {
        title: /*[[${frc.frcName}]]*/,
        // content: '<div style="max-width: 200px; padding: 4px 8px 6px;"><span style="display: inline-block; font-size: 14px; font-weight: 700;">' + [[${frc.frcName}]] + '</span><br/><span style="display: inline-block; margin-top: 4px; font-size: 12px; line-height: 1.2;">' + [[${frc.addr}]] + '</span></div>',
        content: html,
        latlng: new kakao.maps.LatLng(/*[[${frc.lat}]]*/, /*[[${frc.lon}]]*/)
    }

    clusterPositions.push(clusterPosition);

    // setPosition(/*[[${frc.frcName}]]*/, /*[[${frc.lat}]]*/, /*[[${frc.lon}]]*/);
    /*[/]*/
    html = '</div>';
    setMarker();

    /*]]>*/

function clusterOverListener(map, marker, infowindow) {
return function (cluster) {
let markers = cluster.getMarkers();
var lb = new kakao.maps.LatLngBounds(cluster.getBounds().getSouthWest(), cluster.getBounds().getNorthEast())
cluster.getBounds().getSouthWest(); // 영역의 남서좌표
cluster.getBounds().getNorthEast(); // 영역의 북동좌표
markers.forEach(marker1 => {
let position = marker1.getPosition();
var bounds = cluster.getBounds();
if (lb.contain(position)) {
infowindow.open(map, marker1);
}
});
}
}

var markers = [];
var clusterMarkers = [];
for (var i = 0; i < positions.length; i++) {
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
// map: map, // 마커를 표시할 지도
position: positions[i].latlng, // 마커의 위치
});
// 마커에 표시할 인포윈도우를 생성합니다
var infowindow = new kakao.maps.InfoWindow({
content: positions[i].content // 인포윈도우에 표시할 내용
});

        var clusterMarker = new kakao.maps.Marker({
            // map: map, // 마커를 표시할 지도
            position: clusterPositions[i].latlng,  // 마커의 위치
        });
        // 마커에 표시할 인포윈도우를 생성합니다
        var clusterInfowindow = new kakao.maps.InfoWindow({
            content: positions[i].content // 인포윈도우에 표시할 내용
        });
        
        kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
        kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
        markers.push(marker);
    }
    kakao.maps.event.addListener(clusterer, 'clusterover', clusterOverListener(map, marker, clusterInfowindow));

    kakao.maps.event.addListener(clusterer, 'clusterclick', function (cluster) {
        // 현재 지도 레벨에서 1레벨 확대한 레벨
        var level = map.getLevel() - 1;
        map.setLevel(level, {anchor: cluster.getCenter()});
        // 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
    });
    clusterer.addMarkers(markers);

진짜 clusterover 하기 어력네여…

2

클러스터러 이벤트를 for문에 등록해서 positions 개수만큼 이벤트가 등록되고 있습니다.
클러스터러 이벤트는 for문 밖에서 한 번만 등록해 주시고 클러스터에 포함된 infowindow를 구하는 로직을 수정해 주세요.

infowindow를 보여주는 방법은 개발 방법에 따라 여러 방법이 있지만
제가 지금 생각나는 방법은 infowindow를 배열로 관리하고 infowindow 위치가 클러스터에 포함 여부 확인해서 포함된 infowindow를 지도에 표시하는 방법이 있을 것 같습니다.
이 방법을 사용할 땐 infowindow 생성할 때 위치(position)를 설정해야 합니다.

그리고 코드에서 클러스터의 영역정보를 가져오고 다시 LatLngBounds로 만들고 있는데
cluster.getBounds()에서 리턴받은 값 자체가 LatLngBounds객체기 때문에 새로 안 만드셔도 됩니다.

var lb = new kakao.maps.LatLngBounds(cluster.getBounds().getSouthWest(), cluster.getBounds().getNorthEast())
var lb = cluster.getBounds(); //cluster.getBounds()로 리턴받은 값이 위와 같다고 보시면 됩니다.
3

잘 이해를 못하겠습니다 ㅠㅜ

이 부분 말씀하시는 건가요??

    function clusterOverListener(map, marker, infowindow) {
    return function (cluster) {
                        let markers = cluster.getMarkers();
                        var lb = new kakao.maps.LatLngBounds(cluster.getBounds().getSouthWest(),
                      cluster.getBounds().getNorthEast())
                      cluster.getBounds().getSouthWest(); // 영역의 남서좌표
                     cluster.getBounds().getNorthEast(); // 영역의 북동좌표
                  markers.forEach(marker1 => {
                          let position = marker1.getPosition();
                          var bounds = cluster.getBounds();
                          if (lb.contain(position)) {
                                   infowindow.open(map, marker1);
                          } 
                  });
}

이렇게 수정 했는데 그래도 전체 데이터 중 마지막 값만 가져요네요

    function clusterOverListener(map, marker, infowindow) {
    return function (cluster) {
        var aaaa
        marker.forEach(a => {
            let position = a.getPosition();
            var bounds = cluster.getBounds();
            cluster.getMarkers().forEach(b => {
                if (JSON.stringify(b.getPosition()) == JSON.stringify(position)) {
                    if (bounds.contain(position)) {
                        aaaa = b
                    }
                }
            })
        })
                        infowindow.open(map, aaaa);
    }
}
4

for문 밖에서 clusterer 이벤트를 등록하고 이벤트 콜백 함수 안에서
클러스터 영역에 인포윈도우 포함 여부를 확인 후 포함된 인포윈도우를 표시해주세요.
아래 코드는 참고용으로만 봐주시고 로직에 맞게 적용해주세요.

let markers = [];
let infowindows = []; 
for (let i = 0; i < positions.length; i++) {
    // 마커를 생성합니다
    let marker = new kakao.maps.Marker({
        position: positions[i].latlng,
    });

    // 마커에 표시할 인포윈도우를 생성합니다
    let infowindow = new kakao.maps.InfoWindow({
        position: positions[i].latlng, //인포윈도우 위치
        content: positions[i].content // 인포윈도우에 표시할 내용
    });

    markers.push(marker);
    infowindows.push(infowindow);
}

clusterer.addMarkers(markers);


//for문 밖에서 clusterover 이벤트 등록
kakao.maps.event.addListener(clusterer, 'clusterover', function(cluster) {
    var bounds = cluster.getBounds();
    infowindows.forEach(infowindow => {
        if(bounds.contain(infowindow.getPosition())) { //인포윈도우 위치가 클러스터 범위 안에 있는지 체크
            infowindow.setMap(map);//인포윈도우 표시
        } else {
            infowindow.setMap(null);//포함되지 않은 경우 인포윈도우를 지도에서 제거
        }
    });
});
5

감사합니다.

그런데 이런식으로 겹치는건 어떻게 처리해야하나요…?
저걸 하나로 합쳐서 뿌리고싶어요ㅠ
image