클러스터 목록 페이징

스크린샷 2024-03-18 오전 10.13.19

클러스터 갯수랑 클릭하면 그 안에 리스트를 따로 뿌려주고 있는데 400개 이상이면 멈추면서 엄청 느려져서
페이징으로 처리하려고 하는데 클러스터 리스트 페이징 처리는 어떻게 해야하나요?

예시 보면서 해도 감이 안옵니다… 리스트 뿌리는거를 예시랑 다르게 하다보니…

kakao.maps.event.addListener(clusterer, 'clusterclick', function (cluster) {
        document.getElementById("htmlList").innerHTML = '';

        let loading = loadingOverlay.activate();
        for (let val of frcsList) {
            var latLng = new kakao.maps.LatLng(val.lat, val.lon)
            if (cluster.getBounds().contain(latLng)) {
                document.getElementById("htmlList").style.display = ''
                document.getElementById("frcList").style.display = 'none'
                let schHtml = '<div class="name" name="dddd" style="padding: 8px; border-bottom: 1px solid #f2f2ee;">'
                schHtml += '<dt style="font-size: 16px; font-weight: 700;">'
                schHtml += '<a onClick="zoomIn(1, this)" style="cursor: pointer;">' + val.frcName + '</a>'
                schHtml += '</dt>'
                schHtml += '<dd>'
                schHtml += '<span>' + val.addr + '</span>'
                schHtml += '</dd>'
                schHtml += ' </div>'
                document.getElementById("htmlList").innerHTML += schHtml;
            }
        }
        loadingOverlay.cancel(loading);
    });

예제는 서버에서 페이징 처리를 한 데이터를 활용하기 때문에
직접 페이징을 적용하려면 서버에서 페이징 처리한 리스트를 받거나 JS에서 페이징 처리를 구현해주셔야 합니다.
관련 내용은 구글링으로 찾아보시면 많이 나와있어서 원하는 로직을 활용해 주시면 될 것 같아요.

JS로 페이징 하는 방법을 선택했다면,
클러스터를 클릭할 때 클러스터에 속한 마커들(cluster.getMarkers()) 또는 보여줄 리스트 정보를 관리한다면 해당 값을
페이징 처리하는 JS의 파라미터로 보내서 1페이지당 보여줄 개수를리스트로 표시해주세요.

구글링해서 해봣는데 너무 어렵네요,…

페이징 처리하는이유가 400개가 넘는 클러스터 클릭시 멈추는 현상때문에 해 보려는건데;;

후… 페이징처리 말고 다른 방법 없을까요???

대량의 데이터를 클라이언트에서 처리를 할 경우 부하가 생깁니다.
현재 위치의 우선순위가 높은 일부 장소의 마커를 표시하고 나머지 정보는 리스트로 표시하거나
서버에서 클러스터링 한 데이터를 받아서 표현하는 방식(클라이언트에서 마커를 추가해서 숫자로 표현하는 것이 아닌 서버에서 미리 연산된 정보로 숫자만 표시되도록 하는 방법)으로 표현하는 방법들도 있습니다.

해결 했습니다.
그냥 제 소스가 문제였던거 같네요.
innerHtml을 for문 밖으로 빼니까 안멈추네요.
감사합니다.

1개의 좋아요