클러스터에 클릭이벤트가 안 걸립니다 ㅠㅠ
kakao.maps.event.addListener( clusterer, ‘clustered’, function( clusters ) {
.
.
.
}); 이 이벤트를 삭제하면 클릭이벤트가 작동합니다
그리고 마커 생성시 데이터 값중에 한개를 클러스터 의 마커갯수가 나타나던데
데이터값을 대신 넣을수는 없나요?
sum += (parseInt(marker.Gb) || 0); <= marker.Gb 를 넣으니 데이터값은 불러와지는데
이래도 되는건지도 모르겠습니다
클러스터 클릭이벤트와 숫자대신 데이터값을 넣는거…
어떻게 하면 좋을지 조언 좀 부탁드려도 될까요?
더워지는 여름 건강 잘 챙기시고
기적 같은 하루가 되시길 바랩니다
아래는 코드입니다
// 마커저장용 배열 선언
var preMarkers = new Array();
.
.
.
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: true, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
minLevel: 1, // 클러스터 할 최소 지도 레벨
minClusterSize:1,
disableClickZoom : true,
gridSize: 60,
styles: [{ // calculator 각 사이 값 마다 적용될 스타일을 지정한다
width : '60px', height : '60px',
background: '#0066FF',
borderRadius: '30px',
color: '#FFF',
textAlign: 'center',
fontWeight: 'bold',
lineHeight: '61px'
}]
});
// clusterer.setClustererSize(1);
// =================커스텀 클러스터러에 텍스트 집어넣기============
kakao.maps.event.addListener( clusterer, ‘clustered’, function( clusters ) {
clusters.forEach(function(cluster) {
var sum = 0;
cluster.getMarkers().forEach(function(marker) {
sum += (parseInt(marker.Gb) || 0);
});
cluster.getClusterMarker().setContent('<div class="marker">' + sum + "</div>");
});
});
// 지도 레벨을 4로 설정한다
// map.setLevel(6);
// 맵의 위치를 드래그한 경우 지도및 우측매물정보 다시 불러오기
kakao.maps.event.addListener(map, 'dragend', function() {
clusterer.clear();
getList();
});
// 맵의 크기를 변경한 경우 지도및 우측매물정보 다시 불러오기
kakao.maps.event.addListener(map, 'zoom_changed', function() {
preMarkers = new Array();
clusterer.clear();
getList();
});
// 맵이 생성되면 자료를 불러오는 스크립트를 실행
$(document).ready(function(){
getList();
})
function getList(){
// 기존 클러스터 초기화
// 현재 지도의 기본정보를 가져옮
var bounds = map.getBounds();
var sw = bounds.getSouthWest();
var ne = bounds.getNorthEast();
lat1 = sw.Ma;
lng1 = sw.La;
lat2 = ne.Ma;
lng2 = ne.La;
var sendData = {
"lat1":lat1,
"lng1":lng1,
"lat2":lat2,
"lng2":lng2,
};
// 데이터를 가져와 마커를 생성하고 클러스터러 객체에 넘겨줍니다
$.get("getList.php", sendData, function(data) {
// 데이터에서 좌표 값을 가지고 마커를 표시합니다
// 마커 클러스터러로 관리할 마커 객체는 생성할 때 지도 객체를 설정하지 않습니다
var markers = $(data.positions).map(function(i, position) {
// 이미 추가된 마커일 경우 추가안함
if(preMarkers.includes(position.id)) return;
var marker = new kakao.maps.Marker({
position : new kakao.maps.LatLng(position.lat, position.lng),
clickable: true, // 마커를 클릭했을 때 지도의 클릭 이벤트가 발생하지 않도록 설정합니다
title : position.cnt
// content: position.cnt
});
// 마커를 클릭해 함수로 마커정보를 전달합니다.
kakao.maps.event.addListener(marker, 'click', markerClick(map, marker));
// 기존 배열에 마커를 추가
preMarkers.push(position.cnt);
return marker;
});
// 클러스터러에 마커들을 추가합니다
clusterer.addMarkers(markers);
});
// 동일한 데이터의 영역을 가져와 우측 매물정보에 뿌려준다.
$.get("getRightList.php", sendData, function(data) {
$("#rightArea").html(data);
});
}
// 클러스터 클릭시 이벤트 실행
kakao.maps.event.addListener( clusterer, 'clusterclick', function(cluster) {
console.log("클러스터 클릭 됨");
// 현재 지도 레벨에서 1레벨 확대한 레벨
level = map.getLevel()-1;
// 지도를 클릭된 클러스터의 마커의 위치를 기준으로 확대합니다
map.setLevel(level, {anchor: cluster.getCenter()});
});