Question

我正在尝试重绘一组标记。图标来源每隔一分钟生成一次，但是当我刷新网站时，标记仍然使用存在的图标。

var markers = new L.LayerGroup().addTo(map);

function createMarkers() {
//Markers_start
kopankyM = L.marker([48.9585,17.791666666667]).bindPopup("").bindLabel('6 kt, 90°', { noHide: true }).setIcon(new icon({iconUrl: 'img/kopanky.png'})).addTo(markers);
hvezdarnaM = L.marker([49.037666666667,17.646]).bindPopup("").bindLabel('11 kt, 145°', { noHide: true }).setIcon(new icon({iconUrl: 'img/hvezdarna.png'})).addTo(markers);
banovM = L.marker([48.984166666667,17.704333333333]).bindPopup("").bindLabel('15 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/banov.png'})).addTo(markers);
bojkoviceM = L.marker([48.984166666667,17.704333333333]).bindPopup("").bindLabel('11 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/bojkovice.png'})).addTo(markers);
vyskovM = L.marker([49.300166666667,17.025166666667]).bindPopup("").bindLabel('11 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/vyskov.png'})).addTo(markers);
uhhradisteM = L.marker([49.072833333333,17.462333333333]).bindPopup("").bindLabel('5 kt, 45°', { noHide: true }).setIcon(new icon({iconUrl: 'img/uhhradiste.png'})).addTo(markers);
//Markers_end
console.log("createMarkers");
}

createMarkers();
//createIcons();

setInterval(function(){
    markers.clearLayers();
    createMarkers();
    //createIcons();
}, 10000);

我应该添加或编辑什么才能让它正常工作？

Answer 1

听起来好像浏览器没有重新加载图片，而是出于某种原因使用缓存的图片。

可能有多种解决方案，但有一种，可能不是很优雅，就是在图标URL中添加一个虚假的查询参数，迫使浏览器重新加载它：

function createMarkers() {
//Markers_start
kopankyM = L.marker([48.9585,17.791666666667]).bindPopup("").bindLabel('6 kt, 90°', { noHide: true }).setIcon(new icon({iconUrl: 'img/kopanky.png?_cache=' + Math.random()})).addTo(markers);
hvezdarnaM = L.marker([49.037666666667,17.646]).bindPopup("").bindLabel('11 kt, 145°', { noHide: true }).setIcon(new icon({iconUrl: 'img/hvezdarna.png?_cache=' + Math.random()})).addTo(markers);
banovM = L.marker([48.984166666667,17.704333333333]).bindPopup("").bindLabel('15 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/banov.png?_cache=' + Math.random()})).addTo(markers);
bojkoviceM = L.marker([48.984166666667,17.704333333333]).bindPopup("").bindLabel('11 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/bojkovice.png?_cache=' + Math.random()})).addTo(markers);
vyskovM = L.marker([49.300166666667,17.025166666667]).bindPopup("").bindLabel('11 kt, 180°', { noHide: true }).setIcon(new icon({iconUrl: 'img/vyskov.png?_cache=' + Math.random()})).addTo(markers);
uhhradisteM = L.marker([49.072833333333,17.462333333333]).bindPopup("").bindLabel('5 kt, 45°', { noHide: true }).setIcon(new icon({iconUrl: 'img/uhhradiste.png?_cache=' + Math.random()})).addTo(markers);
//Markers_end
console.log("createMarkers");
}

另一个解决方案是检查浏览器缓存图像的原因 - 图标图像的缓存标题可能未正确设置？

在传单中的Redrawin标记

1 个答案: