클러스터 관련 문의

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

[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610

  1. 지도에 노출되는 장소 마킹 및 목록화
  2. 클러스터 클릭시 클러스터에 속한 장소들 목록 노출 및 클러스터 디자인 변경
  3. 마커 클릭시 해당 장소 정보 노출 및 마커 디자인 변경.

안녕하세요. 지도 클러스터 관련하여 작업 중 해결되지 않는 부분이 있어 아래와 같이 문의드립니다.

  1. 지도에 표시된 마커에 장소정보, 클러스터에는 클러스터에 속한 장소들 정보를 조회하여 목록으로 노출할 예정인데, 이와 관련된 메서드나 이벤트가 있나요 ?
  2. 처음 지도 렌더링시 생성되는 클러스터는 커스텀한 디자인이 적용되지 않고, 지도 위치나 줌 등의 이벤트가 발생한 이후부터 디자인이 적용됩니다. 이에 대한 해결 방안이 있을까요 ?
2

  1. 해당 기능은 제공하고 있지 않습니다.
    별도로 마커별로 맵핑테이블을 구성해서 마커에 매칭된 데이터를 가져와주셔야 합니다.

  2. 커스텀 한 디자인이라면 클러스터의 오버레이 객체에 직접 스타일을 적용하셨다는 말씀이실까요?
    clutered 이벤트를 이용해서 클러스터링이 완료된 클러스터에 스타일을 설정하는 방법을 사용하시면 될 것 같습니다.
    마커 클러스터러 커스텀 사용 문의 - lea.ju 님의 게시물 #5
    마커 클러스터러를 커스텀 가능한가요? - lea.ju 님의 게시물 #2

3

답변 감사합니다.

2번 질문에 연장선상으로 질문드립니다.

답글로 달아주신 내용 참고하여 아래와 같이 작성했는데, 첫 렌더링시 아래 이벤트가 발생되지 않아서 기본 디자인으로 노출되고, 이후 줌, 위치 변경 등의 이벤트 발생 이후 커스텀 디자인으로 노출됩니다. 작성된 코드 내에 잘못된 부분이 있을까요 ?

<script>
...
...
kakao.maps.event.addListener(clusterer, 'clustered', function( clusters ) {
	//클러스터 커스텀
    clusters.forEach((cluster) => {
		//console.log('cluster', cluster);
		
		let cnt = cluster.getSize() >= 9 ? '9+' : cluster.getSize();
		new_content = $(`
		<div class="cluster">
			<div class="cnt">
				<strong>${cnt}</strong>
			</div
		</div>
		`)[0]; //jquery dom
		
		cluster.getClusterMarker().setContent(new_content);
		clusterMarker = cluster.getClusterMarker().getContent();
		
		// 클러스터 클릭 이벤트
		clusterMarker.addEventListener('click', (e) => {
		});
    });
});
</script>
4

초기 렌더링에 clustered이벤트가 실행되지 않을 경우 스크립트 실행 순서에 영향이 있을 수 있습니다.
MarkerClusterer에 마커를 추가하기 전 clustered이벤트를 등록해도 동일한지 확인 부탁드립니다.

let clusterer = new kakao.maps.MarkerClusterer({
    map: map,
    averageCenter: true,
    minLevel: 3,
    disableClickZoom: true
});

kakao.maps.event.addListener( clusterer, 'clustered', function( clusters ) {
    console.log( clusters.length );
});

//TODO: 이벤트 등록 이후 마커 추가 
//let markers = [];
// ..