[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
안녕하세요
클러스터 기능 관련해서 궁금한게 있어서 문의 드렸습니다.
현재 아래 코드처럼 클러스터기능을 사용하고 있는데 마커가 점점 많아지다 보니 페이지를 로딩하는데 시간이 너무 오래걸리는 문제가 생깁니다.
카카오맵 지도 즐겨찾기 기능을 보면 수천 개의 장소를 등록해도 페이지 사용에 대한 불편함을 못 느끼겠던데 혹시 어떤 방식으로 문제를 해결했는지, 그리고 문제를 해결하기 위해서 어떤 방식을 적용할 수 있는지 궁금합니다.
// 마커 클러스터러를 생성합니다
var clusterer = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: false, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
gridSize: 70, //클러스터의 격자 크기. 화면 픽셀 단위이며 해당 격자 영역 안에 마커가 포함되면 클러스터에 포함시킨다
minLevel: 3, // 클러스터 할 최소 지도 레벨
calculator : 2, // 클러스터의 크기 구분 값
styles: [{
fontSize: '15px',
width : '24px',
height : '40px',
background: 'url("https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/markerStar.png") no-repeat',
positon: 'getCenter'
}],
default : null
});
// 오버레이 클러스터러를 생성합니다
var clusterer1 = new kakao.maps.MarkerClusterer({
map: map, // 마커들을 클러스터로 관리하고 표시할 지도 객체
averageCenter: false, // 클러스터에 포함된 마커들의 평균 위치를 클러스터 마커 위치로 설정
gridSize: 70, //클러스터의 격자 크기. 화면 픽셀 단위이며 해당 격자 영역 안에 마커가 포함되면 클러스터에 포함시킨다
minLevel: 3, // 클러스터 할 최소 지도 레벨
calculator : 2, // 클러스터의 크기 구분 값
styles: [{
fontSize: '0px',
background: null
}],
default : null
});
// 기존 클러스터 오버레이를 저장하는 변수
var currentClusterOverlay = null;
// 지도에 마커를 표시하는 함수입니다
function displayMarker(title, name, lat, lng, assets, type, speed, install, run, supply, manege) {
titleandname = title + " " + name;
// 이전 클러스터 오버레이가 있다면 제거합니다
if (currentClusterOverlay) {
currentClusterOverlay.setMap(null);
}
// 마커 생성 및 설정 코드
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(lat, lng)
});
var overlay = new kakao.maps.CustomOverlay({ // 클릭시 뜨는 글자
clickable: true,
yAnchor: 1.3,
position: marker.getPosition()
});
var overlay1 = new kakao.maps.CustomOverlay({ // 마커 밑에 글자
yAnchor: -0.3,
position: marker.getPosition()
});
var content = '<div class="wrapboard">' + // 클릭시 뜨는 글자
' <div id="divright"> ' +
' <input id="updatebutton" type="button" onclick ="viewupdatebox();" value="수정" />' +
' <input id="deletebutton" type="button" onclick ="viewdeletebox();" value="삭제" />' +
' </div> ' +
' <div class="half">' +
' <a id="share-location" href="javascript:shareLocation()"> ' +
' <img src="https://developers.kakao.com/assets/img/about/buttons/navi/kakaonavi_btn_medium.png" />' +
' </a>' +
' </div>' +
' <div class="board">' +
' 1: ' + assets + '<br>' +
' 2: ' + type + '<br>' +
' 3: ' + speed + '<br>' +
' 4: ' + install + '<br>' +
' 5: ' + run + '<br>' +
' 6: ' + supply + '<br>' +
' 7:' + manege +
' </div>' +
' </div>';
var content1 = document.createElement('div'); // 마커 밑에 글자
content1.innerHTML = titleandname;
content1.style.cssText = 'font-size: 10px; font-weight: bolder;color : blue ;text-shadow: -1px 0 #FFF, 0 1px #FFF, 1px 0 #FFF, 0 -1px #FFF;';
overlay.setContent(content);
overlay1.setContent(content1);
overlay1.setMap(map);
clusterer.addMarker(marker);
clusterer1.addMarker(overlay1);
// 마커에 클릭 이벤트를 등록합니다
kakao.maps.event.addListener(marker, 'click', function(mouseEvent) {
// 이전 클러스터 오버레이가 있다면 제거합니다
if (currentClusterOverlay) {
currentClusterOverlay.setMap(null);
}
overlay.setMap(map); // 클러스터 오버레이를 표시합니다
// 클릭한 마커에 대한 클러스터 오버레이를 저장합니다
currentClusterOverlay = overlay;
var markercenter = new kakao.maps.LatLng(lat, lng);
map.panTo(markercenter);
// 지도에 클릭 이벤트를 등록합니다
kakao.maps.event.addListener(map, 'click', function(mouseEvent) {
overlay.setMap(null);
});
}