DB에 저장된 사용자의 마커들을 클러스터러로 표시하고 싶은데, 지도 로딩과 마커들은 표시가 잘 되는데 클러스터러만 적용이 안됩니다.
클러스터 라이브러리 적용은 다음과 같이 했고 지도도 잘 뜹니다.
클러스터러 적용만이 왜 안되는 것일까요?
다음은 코드 일부분이며 localhost:8080 주소 등은 제거하였습니다.
참고로 개발자 도구에서도 오류가 전혀 뜨지 않습니다.
useEffect(() => {
var mapContainer = document.getElementById('map'),
mapOption = {
center: new kakao.maps.LatLng(33.450701, 126.570667),
level: 13
};
var map = new kakao.maps.Map(mapContainer, mapOption);
navigator.geolocation.getCurrentPosition(function (position) {
var lat = position.coords.latitude,
lon = position.coords.longitude;
if (navigator.geolocation) {
var locPosition = new kakao.maps.LatLng(lat, lon),
displayMarker(locPosition, message);
} else {
var locPosition2 = new kakao.maps.LatLng(33.450701, 126.570667),
message2 = 'error'
displayMarker(locPosition2, message2);
}
const getData = () => {
axios.get("프로젝트 주소명", {
params: {
userId: localStorage.getItem('userId')
}
}).then((response) => {
const gpsJson = JSON.stringify(response.data)
const parsedGps = JSON.parse(gpsJson);
console.log(gpsJson)
for (var i = 0; i < parsedGps.length; i++) {
var lat = parsedGps[i].latitude,
lon = parsedGps[i].longitude;
var locPosition = new kakao.maps.LatLng(lat, lon);
displayMarker(locPosition, parsedGps[i].text);
}
})
};
getData();
function displayMarker(locPosition) {
var marker = new kakao.maps.Marker({
map: map,
position: locPosition
});
var markers = [];
var clusterer = new kakao.maps.MarkerClusterer({
map: map,
averageCenter: true,
minLevel: 10,
});
markers.push(marker);
clusterer.addMarkers(markers);
map.setCenter(locPosition);
};
});