$(document).ready(function(){
var regions;
$.ajax({
method: "GET",
url: "/place",
contentType: "application/json",
success: function(response){
regions = response;
clusterer = groupDo(response);
});
}
});
var clusterer;
$(".group-do").click(() => {
$.ajax({
method: "GET",
url: "/place",
contentType: "application/json",
success: function(response){
clusterer = groupDo(response);
}
});
})
function groupDo(regions){
var mapContainer = document.getElementById('map'); // 지도를 표시할 div 요소
var mapOption = {
center: new kakao.maps.LatLng(36.5, 127.5), // 지도 중심 좌표
level: 12 // 지도 확대 레벨
};
// 지도를 생성합니다.
var map = new kakao.maps.Map(mapContainer, mapOption);
// 지역을 그룹화할 객체를 생성합니다.
var groupedRegions = {};
// 지역 정보를 그룹화합니다.
regions.forEach(function (region) {
if (!groupedRegions[region.doName]) {
groupedRegions[region.doName] = [];
}
groupedRegions[region.doName].push(region);
});
for (var groupName in groupedRegions) {
// 도 별로 그룹핑
var group = groupedRegions[groupName];
var resCount = 0;
var clusterSize = 1;
for (var i = 0; i < group.length; i++) {
resCount += group[i].resCount;
}
clusterer = new kakao.maps.MarkerClusterer({
map: map,
averageCenter: true,
clickable: true,
minLevel: 5,
minClusterSize: clusterSize,
texts: [groupName + ' 자원 : ' + resCount + '개'],
calculator: [1, 2, 3]
});
var markers = [];
for (var i = 0; i < group.length; i++) {
var marker = new kakao.maps.Marker({
position: new kakao.maps.LatLng(group[i].latitude, group[i].longitude),
title: group[i].installPlaceName
});
markers.push(marker);
}
clusterer.addMarkers(markers);
kakao.maps.event.addListener(clusterer, 'clusterclick', function (cluster) {
var markersInCluster = cluster.getMarkers();
console.log(markersInCluster);
for (var i = 0; i < markersInCluster.length; i++) {
var marker = markersInCluster[i];
var markerPosition = marker.getPosition(); // 마커의 위치 정보를 가져옵니다.
var markerTitle = marker.getTitle(); // 마커의 타이틀을 가져옵니다.
// 가져온 정보를 콘솔에 출력합니다.
console.log('마커 타이틀: ' + markerTitle);
console.log('마커 위치 - 위도: ' + markerPosition.getLat() + ', 경도: ' + markerPosition.getLng());
}
});
}
return clusterer;
}
현재 지역별 현황을 보여주는 지도를 구현하고 있습니다. 현재 제공하는 API에서는 지원을 하지 않아 커스텀하여 도/광역시 단위로는 구현을 하였습니다.
그런데 클러스터러 이벤트 처리를 하는 도중에 모든 방법을 적용해봤으나 클러스터러 안에 있는 객체를 가져오지 못해서 질문드립니다.
addListener에 있는 cluster에서 cluster.getMarkers를 하게 되면 위에서 cluster에 마커를 등록하게 되는데 이 마커 객체들을 가져오지 못합니다. null이 되버립니다. 그래서 마커 등록이 제대로 되지 않는 것도 아니고 객체만 못가져오다 보니 어려움이 있습니다.
지금 구현하고 있는 것이 서울을 클릭하였을 때 서울 안에 있는 자원들의 마커를 가져오고 싶습니다.
