현재 다음과 같이 마커들에 대한 정보를 받아온 뒤에 그 데이터를 기반으로 마커를 올리는 function을 작성하였습니다.
function createMarker(siteList) {
const imageSize = new window.daum.maps.Size(39, 52);
const markerImage = new window.daum.maps.MarkerImage(cctvImg, imageSize);
const selectedMarkerImage = new window.daum.maps.MarkerImage(
selectedCctvImg,
imageSize
);
let temp = [];
siteList.forEach((sitesList) => {
const { markers } = sitesList;
markers.forEach((marker) => {
const { longitude, latitude, name } = marker;
let markerPosition = new window.daum.maps.LatLng(latitude, longitude);
let marker = new window.daum.maps.Marker({
position: markerPosition,
image: markerImage,
title: name,
});
temp.push(marker);
let infowindow = new window.daum.maps.InfoWindow({
//some codes…
});
window.daum.maps.event.addListener(marker, “mouseover”, function () {
//some codes…
});
window.daum.maps.event.addListener(marker, “mouseout”, function () {
//some codes…
});
window.daum.maps.event.addListener(marker, “click”, function () {
//some codes…
});
});
});
setMarkers(temp);
clusterer = new window.daum.maps.MarkerClusterer({
map: map,
averageCenter: true,
minLevel: 3,
styles: [
//some styles
],
});
clusterer.addMarkers(temp);
clusterer.setCalculator(function (size) {
//some calculator logic
});
}
위처럼 인자로 받은 List에서 marker 정보를 획득한 뒤 kakao Marker로 만들어 클러스터러와 함께 지도에 올리고 있습니다.
그런데 현재 넘겨받는 마커가 약 2800개 정도가 됩니다.
이런 상황에서 마커 로드 및 지도에서 줌 레벨 변경 시 등 렌더링 속도가 현저하게 떨어지는 상황이 되었습니다.
혹시 렌더링 속도에 대해 좀 더 개선할 여지가 있을까요?