### 使用 Leaflet 定时自动关闭 Popup
本文将介绍如何在 Leaflet 地图中实现一个常见需求：当鼠标移出 Marker 时，自动关闭通过 `mou
seover` 事件打开的 Popup，但同时保留通过 `click` 事件打开的 Popup。这可以通过结合使用标志变量和 `setTimeout` 函数来实现。
首先，我们需要一个标志变量来区分是通过 `mouseover` 还是 `click` 事件打开的 Popup。我们将使用 `whichPopup` 变量，当通过 `mouseover` 打开 Popup 时，将其设置为 `1`；当通过 `click` 打开 Popup 时，将其设置为 `0`。
以下是修改后的代码示例：
```
javascript
var whichPopup = 0;
var marker = L.marker([46.26734, 12.328876], {icon: myIcon2})
.on('mouseover', function(e) {
popup = L.popup()
.setLatLng(e.latlng)
.setContent('Luoghi, Cose, Stradezuojiankuohao
phpcnbr>Diga del Vajont')
.openOn(mymap);
whichPopup = 1;
})
.on('click', function(e) {
var popup2 = L.popup()
.setLatLng(e.latlng)
.setContent('<a class="image-popup-no-margins hover-title" href="https://atorinfriul.it/
html/gpx/Luoghi_Cose_Strade__Diga_Vajont_NOT_MINIMIZED.php" Target="_blank" title="Diga del Vajont"> <img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_
cose_strade/Fumetto-diga-del-vajont.jpg" style="width:150px;" alt="Responsive image"></a> <div class="hover-image"><img loading="lazy" src="https://atorinfriul.it/html/images/luoghi_cose_strade/Fumetto-diga-del-vajont.jpg" alt="Responsive image"></div>')
.openOn(mymap);
whichPopup = 0;
})
.addTo(mymap);
marker.on('mouseout', function (e) {
if (whichPopup == 1){
setTimeout(function() {
mymap.closePopup();
}, 5000);
}
});
代码解释：
-
whichPopup 变量： 用于记录当前打开的 Popup 类型。1 表示通过 mouseover 打开，0 表示通过 click 打开。
-
mouseover 事件： 当鼠标悬停在 Marker 上时，打开一个 Popup，并将 whichPopup 设置为 1。
-
click 事件： 当点击 Marker 时，打开另一个 Popup（包含图像），并将 whichPopup 设置为 0。
-
mouseout 事件： 当鼠标移出 Marker 时，检查 whichPopup 的值。如果为 1，则使用 setTimeout 函数在 5 秒后关闭地图上的 Popup。
注意事项：
- setTimeout 函数接受两个参数：要执行的函数和一个延迟时间（以毫秒为单位）。 在本例中，延迟时间设置为 5000 毫秒（5 秒）。
- mymap.closePopup() 会关闭地图上所有打开的 Popup。 确保只有需要关闭的 Popup 被关闭。
- 可以根据实际需求调整延迟时间。
总结：
通过使用标志变量和 setTimeout 函数，我们可以灵活地控制 Leaflet 地图中的 Popup 的自动关闭行为。 这种方法允许我们区分不同类型的 Popup，并根据需要选择性地关闭它们，从而提供更好的用户体验。
以上就是使用 Leaflet 定时自动关闭 Popup的详细内容，更多请关注php中文网其它相关文章！
672
收藏
