javascript - Leaflet 标记弹出窗口中的缓存破坏

Question

我正在使用带有加载更新图像的弹出窗口的 Leaflet map 。但是，图像最终会被缓存。我想我会通过添加 Date.now() 来解决这个问题，但这只会添加页面加载时的日期，而不是弹出窗口打开时的日期。

.bindPopup('<img src="image.jpg?'+ Date.now()+'" width="260" height="196" border="0"><br>Location One').addTo(map),

我试过将日期放在一个单独的函数中......

function foo () {
setInterval(Date.now(), 10000)
}

并从弹出窗口中调用该函数:

   .bindPopup('<img src="image.jpg?'+ foo() +'" width="260" height="196" border="0"><br>Location One').addTo(map),

然而这只是加载:“image.jpg?undefined”。

我怎样才能更新缓存清除时间戳？

(目前我只是使用元刷新来更新整个页面，这不是很优雅，并且在您到达 map 上想要的位置时重新加载页面...)

Answer 1

您可以将任意容器/空内容绑定(bind)到弹出窗口，而不是在相关的 Map、Marker 或上监听 popupopen 事件路径。

scope.on('popupopen', function(ev){
    var src = 'image.jpg?v=' + Date.now();
    ev.popup.setContent('<img src="'+ src +'"/>');
});