
### 使用 Leaflet 定时自动关闭 Popup本文将介绍如何在 Leaflet 地图中实现一个常见需求:当鼠标移出 Marker 时,自动关闭通过 `mouseover` 事件打开的 Popup,但同时保留通过 `click` 事件打开的 Popup。这可以通过结合使用标志变量和 `setTimeout` 函数来实现。首先,我们需要一个标志变量来区分是通过 `mouseover` 还是 `click` 事件打开的 Popup。我们将使用 `whichPopup` 变量,当通过 `mouseover` 打开 Popup 时,将其设置为 `1`;当通过 `click` 打开 Popup 时,将其设置为 `0`。以下是修改后的代码示例:“`javascriptvar 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, Stradezuojiankuohaophpcnbr>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 被关闭。可以根据实际需求调整延迟时间。
总结:
通过使用标志变量和 setTimeout 函数,我们可以灵活地控制 Leaflet 地图中的 Popup 的自动关闭行为。 这种方法允许我们区分不同类型的 Popup,并根据需要选择性地关闭它们,从而提供更好的用户体验。
以上就是使用 Leaflet 定时自动关闭 Popup的详细内容,更多请关注php中文网其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/76388.html
微信扫一扫
支付宝扫一扫