위는 오픈닥터라는 사이트의 이미지입니다
위와 같은 방식으로 마커클러스터링 내의 마커들을 출력하려 하였으나,
marker의 title로 데이터를 전달 받는 방법밖에 발견하지 못하였습니다.
질문) 커스텀오버레이 마커들의 클릭 이벤트의 등록이 끝난 후
마커 클러스터러가 생성되는데 마커클러스터의 클릭 시 멤버들의 content는 어떻게 가져오나요?
++ getMarkers()를 써서 마커들이 뭐가 들어있는지는 알았는데 이를 클러스터의 클릭이벤트에 사용할 수 없었습니다.
2022-06-17 질문이 이상해 답변이 곤란하신 것 같아 새로 정리해서 써봅니다.
useEffect(() => {
if (kakaoMap === null || markerPositions === undefined) {
return;
}
var clusterer = new kakao.maps.MarkerClusterer({
map: kakaoMap, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 2, // 클러스터 할 최소 지도 레벨
disableClickZoom: true, // 클러스터 마커를 클릭했을 때 지도가 확대되지 않도록 설정한다
});
var markers = userData.map((data) => {
const position = new kakao.maps.LatLng(data.location.lat, data.location.lng);
var marker = new kakao.maps.Marker({
position,
});
//커스텀오버레이
const content = `<div class="bg-black opacity-70 top-[20px] right-1 relative p-1">
<p class=" text-white">${data.object}</p></div>`;
var overlayHover = new kakao.maps.CustomOverlay({
content,
map: kakaoMap,
position,
});
kakao.maps.event.addListener(marker, "mouseover", function () {
overlayHover.setMap(kakaoMap);
mouseOver();
});
kakao.maps.event.addListener(marker, "mouseout", function () {
overlayHover.setMap(null);
mouseOut();
});
kakao.maps.event.addListener(marker, "click", function () {
MouseClick(data);
// overlay.setMap(kakaoMap);
});
kakao.maps.event.addListener(kakaoMap, "click", function () {
overlayHover.setMap(null);
mapClick();
// MouseClick(userData.id);
});
overlayHover.setMap(null);
return marker;
});
clusterer.addMarkers(markers);
kakao.maps.event.addListener(clusterer, "clusterclick", function (cluster) {
console.log(cluster.getMarkers());
});
}, [kakaoMap, markerPositions]);
첫번째 useEffect에서 카카오맵을 불러와서 두번째 useEffect에서 위와 같은 처리를 하게 됩니다.
마커를 생성하고 마커에 커스텀 오버레이와 마우스 이벤트들을 추가해주는 코드입니다.
그리고 마커클러스터를 사용하여 마커의 생성이 끝난 후 클러스터링을 합니다.
이 경우에서 userData를 접근하려면 마커의 생성 시점에 접근해야하는데(content 의 ${userData.object} 나
클릭이벤트의 MouseClick(userData); 처럼 접근하려 하였으나
클러스터링은 marker들이 전부 렌더링 된 이후에 시작하게되어서
접근이 힘들어졌습니다.
그래서 해결방법을 혼자 찾아봤지만 제 능력으로는
marker안에 title 에 데이터를 넣고 마커에 비교하는 방법밖에 못찾게되었습니다.
혹시, 클러스터를 클릭했을때 안의 마커들이 어떤 데이터를 가지고 있는지 알려면
어떤 방식을 사용해야 하는지 알수있을까요?
