[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
안녕하세요.
공공데이터 10000개를 가져와서 마커 생성후 일정 레벨에서 클러스터로 묶이도록 만들었습니다.
(공공데이터 api 스프링부트에서 호출, 필요한 값만 자바 객체로 저장하여 ArrayList로 데이터 넘겨줌.)
(controller(springboot) → html(thymeleaf) → javascript 순으로 데이터값 이동)
지도 이동시 확대된 화면에서는 문제가 없는데 축소한 화면에서는 마커 표시 데이터양이 많아져서 딜레이가 생깁니다.
페이지 처음 불러올 때도 로딩이 꽤 걸리구요.
페이지 처음 로딩시 마커 10000개를 생성하는게 아닌 보여지는 화면의 위치에서만 마커 생성 되게 하는 방법이나
페이지 딜레이 없이 실행될 수 있는 좋은 방법이 있다면 공유해주시면 감사하겠습니다.
javascript 코드 첨부합니다.
// [지도 불러오기]
var container = document.getElementById(‘map’);
var options = {
center: new kakao.maps.LatLng(35.099903, 129.02715),
level: 3
};
var map = new kakao.maps.Map(container, options);
// [지도에 확대 축소 컨트롤 생성]
var zoomControl = new kakao.maps.ZoomControl();
// [지도의 우측에 확대 축소 컨트롤 추가]
map.addControl(zoomControl, kakao.maps.ControlPosition.RIGHT);
// [마커 및 클러스터 생성]
var markers = []; // 마커들을 담을 배열
for (var i = 0; i < aptList.length; i++) {
// [받아온 데이터에 마커 표시]
var marker = new kakao.maps.Marker({
map: map,
position: new kakao.maps.LatLng(aptList[i].aptLat, aptList[i].aptLng)
});
markers.push(marker); // 마커를 배열에 추가
// [마커에 인포윈도우 표시]
var infowindow = new kakao.maps.InfoWindow({
content: aptList[i].aptName // 인포윈도우에 표시할 내용
});
// [마커에 이벤트 등록]
kakao.maps.event.addListener(marker, 'mouseover', makeOverListener(map, marker, infowindow));
kakao.maps.event.addListener(marker, 'mouseout', makeOutListener(infowindow));
}
var clusterer = new kakao.maps.MarkerClusterer({
map: map,
averageCenter: true,
minLevel: 4
});
clusterer.addMarkers(markers);
// 인포윈도우를 표시하는 클로저를 만드는 함수
function makeOverListener(map, marker, infowindow) {
return function() {
infowindow.open(map, marker);
};
}
// 인포윈도우를 닫는 클로저를 만드는 함수
function makeOutListener(infowindow) {
return function() {
infowindow.close();
};
}