마커 클러스터에 이미지 변경

지도/로컬 API
#1

  1. 마커 클러스터 모양을 숫자가 적힌 동그란 모양이 아니라 그냥 하나의 마커로 하려고 하면 어떻게 해야 하는지 알 수 있을까요?

  2. 그리고 지도에 표시하는 커스텀 오버레이에도 클러스터 기능을 넣을 수 있나요?

#2
  1. Cluster 에 마우스오버시 css - lea.ju님의 글 #11 답변 참고해서
    클러스터링이 완료되면 각 클러스터에 content 스타일을 변경해주세요.
  2. 네 가능합니다. 커스텀 오버레이도 클러스터러에 추가할 수 있습니다
#3

클러스터 styles 에서 background 값을 이미지로 설정해서 1번 문제는 해결 했습니다

2번 문제와 같은 경우는 overlay 1을 클러스터 하고 싶은데 어떻게 해야 할지 감이 안 잡힙니다…


    // 지도에 표시된 마커 객체를 가지고 있을 배열입니다
    var markers = [];
    var contents = [];



        // 마커 클러스터러를 생성합니다
        var clusterer = new kakao.maps.MarkerClusterer({
            map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
            averageCenter: false, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
            minLevel: 4, // 클러스터 할 최소 지도 레벨
            calculator : 2, // 클러스터의 크기 구분 값
            styles: [{
              fontSize: '0px',
              width : '24px',
              height : '40px',
              background: 'url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png") no-repeat',
              positon: 'getCenter'
            }],
            default : null
        });





    for(let i=0; i < positions.length; i++){
        var data = positions[i];
        displayMarker(data);
    }

    // 지도에 마커를 표시하는 함수입니다
      function displayMarker(data) {
        var marker = new kakao.maps.Marker({
            map: map,
            position: data.latlng
        });
        var overlay = new kakao.maps.CustomOverlay({     // 클릭시 뜨는 글자
            yAnchor: 3,
            position: marker.getPosition()
        });
        var overlay1 = new kakao.maps.CustomOverlay({    // 마커 밑에 글자
            yAnchor: -0.3,
            position: marker.getPosition()
        });

        var content = document.createElement('div');    // 클릭시 뜨는 글자
        content.innerHTML =  data.title;
        content.style.cssText = 'background: white; border: 1px solid black';

        var content1 = document.createElement('div');   // 마커 밑에 글자
        content1.innerHTML =  data.title;
        content1.style.cssText = 'font-size: 0.5em; font-weight: bolder';

        var closeBtn = document.createElement('button');
        closeBtn.innerHTML = '닫기';
        closeBtn.onclick = function () {
            overlay.setMap(null);
        };
        content.appendChild(closeBtn);
        overlay.setContent(content);
        overlay1.setContent(content1);

        kakao.maps.event.addListener(marker, 'click', function() {
        overlay.setMap(map);
        });

        overlay1.setMap(map);
        clusterer.addMarkers(marker);

        // 생성된 마커를 배열에 추가합니다
        markers.push(marker);
        contents.push(overlay1);
    }

    // 배열에 추가된 마커들을 지도에 표시하거나 삭제하는 함수입니다
    function setMarkers(map) {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(map);
            contents[i].setMap(map);
        }
    }


    // "마커 보이기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에 표시하는 함수입니다
    function showMarkers() {
        setMarkers(map);
        clusterer.addMarkers(markers);  //마커 클러스터를 보이게합니다
    }

    // "마커 감추기" 버튼을 클릭하면 호출되어 배열에 추가된 마커를 지도에서 삭제하는 함수입니다
    function hideMarkers() {
        setMarkers(null);
        clusterer.removeMarkers(markers); //마커 클러스터를 보이지않게 합니다
    }


      clusterer.addMarkers(markers);  //초기값 : 마커 클러스터를 보이게합니다
#4

displayMarker 함수에서 생성된 overlay1을 아래 코드 참고해서 클러스터러에 추가해주세요.
그리고 코드 최하단에 있는 clusterer.addMarkers(markers);는 주석 또는 삭제해주세요.

function displayMarker(data) {
    //…
    clusterer.addMarker(overlay1); // 클러스터러에 생성된 overlay1을 추가해주세요.
    // clusterer.addMarkers(marker);
    //…
}
#5

감사합니다

1개의 좋아요
#6

원래 댓글 적거나 수정할 때마다 위로 올라가나요,…