0

0

使用 Leaflet 定时自动关闭 Popup

霞舞

霞舞

发布时间:2025-09-07 16:57:02

|

812人浏览过

|

来源于php中文网

原创

 使用 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(' Responsive image
Responsive image
') .openOn(mymap); whichPopup = 0; }) .addTo(mymap); marker.on('mouseout', function (e) { if (whichPopup == 1){ setTimeout(function() { mymap.closePopup(); }, 5000); } });

代码解释:

  1. whichPopup 变量: 用于记录当前打开的 Popup 类型。1 表示通过 mouseover 打开,0 表示通过 click 打开。
  2. mouseover 事件: 当鼠标悬停在 Marker 上时,打开一个 Popup,并将 whichPopup 设置为 1。
  3. click 事件: 当点击 Marker 时,打开另一个 Popup(包含图像),并将 whichPopup 设置为 0。
  4. mouseout 事件: 当鼠标移出 Marker 时,检查 whichPopup 的值。如果为 1,则使用 setTimeout 函数在 5 秒后关闭地图上的 Popup。

注意事项:

  • setTimeout 函数接受两个参数:要执行的函数和一个延迟时间(以毫秒为单位)。 在本例中,延迟时间设置为 5000 毫秒(5 秒)。
  • mymap.closePopup() 会关闭地图上所有打开的 Popup。 确保只有需要关闭的 Popup 被关闭。
  • 可以根据实际需求调整延迟时间。

总结:

nitc企业模版免费下载3.2
nitc企业模版免费下载3.2

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

下载

通过使用标志变量和 setTimeout 函数,我们可以灵活地控制 Leaflet 地图中的 Popup 的自动关闭行为。 这种方法允许我们区分不同类型的 Popup,并根据需要选择性地关闭它们,从而提供更好的用户体验。

					

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

778

2023.08.22

class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

469

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

13

2025.12.06

function是什么
function是什么

function是函数的意思,是一段具有特定功能的可重复使用的代码块,是程序的基本组成单元之一,可以接受输入参数,执行特定的操作,并返回结果。本专题为大家提供function是什么的相关的文章、下载、课程内容,供大家免费下载体验。

483

2023.08.04

js函数function用法
js函数function用法

js函数function用法有:1、声明函数;2、调用函数;3、函数参数;4、函数返回值;5、匿名函数;6、函数作为参数;7、函数作用域;8、递归函数。本专题提供js函数function用法的相关文章内容,大家可以免费阅读。

163

2023.10.07

http与https有哪些区别
http与https有哪些区别

http与https的区别:1、协议安全性;2、连接方式;3、证书管理;4、连接状态;5、端口号;6、资源消耗;7、兼容性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2081

2024.08.16

俄罗斯Yandex引擎入口
俄罗斯Yandex引擎入口

2026年俄罗斯Yandex搜索引擎最新入口汇总,涵盖免登录、多语言支持、无广告视频播放及本地化服务等核心功能。阅读专题下面的文章了解更多详细内容。

24

2026.01.28

包子漫画在线官方入口大全
包子漫画在线官方入口大全

本合集汇总了包子漫画2026最新官方在线观看入口,涵盖备用域名、正版无广告链接及多端适配地址,助你畅享12700+高清漫画资源。阅读专题下面的文章了解更多详细内容。

7

2026.01.28

ao3中文版官网地址大全
ao3中文版官网地址大全

AO3最新中文版官网入口合集,汇总2026年主站及国内优化镜像链接,支持简体中文界面、无广告阅读与多设备同步。阅读专题下面的文章了解更多详细内容。

28

2026.01.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PHP课程
PHP课程

共137课时 | 10万人学习

JavaScript ES5基础线上课程教学
JavaScript ES5基础线上课程教学

共6课时 | 11.2万人学习

PHP新手语法线上课程教学
PHP新手语法线上课程教学

共13课时 | 0.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号