使用 Leaflet 定时自动关闭 Popup-js教程-PHP中文网

使用 Leaflet 定时自动关闭 Popup

霞舞

发布： 2025-09-07 16:57:02

原创

812人浏览过

使用 Leaflet 定时自动关闭 Popup

### 使用 Leaflet 定时自动关闭 Popup 本文将介绍如何在 Leaflet 地图中实现一个常见需求：当鼠标移出 Marker 时，自动关闭通过 `mouseover` 事件打开的 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, Strade
Diga del Vajont') .openOn(mymap); whichPopup = 1; }) .on('click', function(e) { var popup2 = L.popup() .setLatLng(e.latlng) .setContent('

') .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 被关闭。
可以根据实际需求调整延迟时间。

总结：

nitc企业模版免费下载3.2

网站设计精美：前台页面全部采用DIV+CSS架构，设计严格规范，页面精美大气，布局合理。管理操作方便：后台管理界面友好，使用方便，功能强大，系统安全，性能稳定。用户使用全自动化控制，功能模块可扩展性强。搜索引擎优化：经多位网络营销专家制定，严格按照搜索引擎规范进行优化，以致在最短的时间内提升网站的曝光率。企业办公应用：提拱相关的询盘/订单管理、业务管理、客户管理等企业常用办公基础应用服