다음지도를 api를 이용하여 마커를 지도에 올렸습니다. 마커위치는 json파일로 작성했습니다.
핸드폰에서 처음에 열때는 잘보입니다. 그런데 한두시간 후에 다시 열여보면 지도만 보이고 마커는 보이지 않습니다.
새로고침하면 다시 잘보여요. 새로고침 안해도 잘보이게 하려면 어떻게 해야 할까요. 아래는 소스입니다.
PC에서는 비슷한 상황을 재현 못해서 테스트 못했습니다.
마커좌표를 html에 넣으면 이상없이 잘 작동합니다.
var map = new kakao.maps.Map(container, options);
var imgsize = 18;
var markers = [];
function fetchMarkers() {
// Cache-busting to ensure we fetch the latest JSON
fetch('markers.json?nocache=' + new Date().getTime())
.then(response => response.json())
.then(positions => {
if (positions.length === 0) {
console.error('No data found');
return;
}
removeMarkers();
positions.forEach(position => {
var markerPosition = new kakao.maps.LatLng(position.lat, position.lng);
var marker = new kakao.maps.Marker({
position: markerPosition,
title: position.title
});
marker.setMap(map);
markers.push(marker);
});
})
.catch(error => console.error('Error fetching position:', error));
}
function removeMarkers() {
markers.forEach(marker => marker.setMap(null));
markers = [];
}
// Fetch markers initially
fetchMarkers();
// Re-fetch markers when the window gains focus
window.addEventListener('focus', function() {
fetchMarkers();
console.log('사용자가 웹페이지에 돌아왔습니다.');
});
// Periodically refresh markers
setInterval(fetchMarkers, 60000); // 60초마다 갱신
});
</script>