leaflet如何给popup弹框添加超链接或按钮响应

 时间:2024-11-01 23:38:06

leaflet如何自定义弹框,在popup弹框内容中添加常用的html标签,如超链接或按钮,以便于通过弹框点击进入某一个子页面或子场景。超链接可以直接响应,但是按钮需要设置点击事件。

工具/原料

写代码的编辑器,sublime,webstorm等都可以

能上网的电脑,配置好node.js环境

方法/步骤

1、首先看一下效果图,在地图上有marker(可以自定义图标),点击marker后出现弹框,显示某提示内容,在提示中实现一个按钮,点击【进入】可以实现某个响应。

leaflet如何给popup弹框添加超链接或按钮响应

2、或者添加其他html标签,比如超链接,如图,在地图上有marker(可以自定义图标),点击marker后出现弹框,显示某提示内容,在提示中有一个超链接,点击【进入】可以触发响应。

leaflet如何给popup弹框添加超链接或按钮响应

3、那么,如何实现这种效果呢?首先要通过leaflet官网的示例来实现基础功能,1.创建地图;2.添加点;3.添加弹框。如图,leaflet官网例子很容易学会。

leaflet如何给popup弹框添加超链接或按钮响应

4、然后在弹框中添加html标签。需要在弹框popup的内容属性content里面豹肉钕舞设置,与提示内容进行拼接,比如<l-pop锇栀劐箨up:content="1号点+'<br><buttonid="btnCon">进入</button>'"></l-popup><l-popup:content="2号点+'<br><buttonid="btnCon">进入</button>'"></l-popup>效果如图所示。

leaflet如何给popup弹框添加超链接或按钮响应

5、或者添加超链接:<l-popup:content="1号点+'<br><ahref="http://www.baidu.com">进入</a>'"></l-popup>,如图,点击后响应进入到百度的页面。

leaflet如何给popup弹框添加超链接或按钮响应

6、注意了,如何给按钮添加点击事件呢?与超链接不同的是需要通过id或者class属性来畛粳棠奈获取html元素的方法来得到该按钮【进入】元素,可以通过doc锇栀劐箨ument.getElementById("")方法来绑定onclick事件。但是这里要考虑的一个问题是如何让绑定事件生效,就是document.getElementById("btnCon").onclick=function(){alert('a');}这个代码应该写在哪里。因为这里通过id获取元素的时候,必须要在该按钮已经创建后浏览器才能找到id,而按钮是在弹框显示后才创建生成的。所以如果直接把绑定事件的代码写在script里面,代码执行时还没有生成弹框,自然就找不到id所对应的按钮。如何解决?

leaflet如何给popup弹框添加超链接或按钮响应

7、leaflet里面有一个p艺皱麾酪opupopen事件,会在弹框打开显示之前触发,所以可以在这个事件中写入绑定按钮点击事件的代码。这样就绺从萦米可以了。this.$refs.map.mapObject.on("popupopen",function(){document.getElementById("btnCon").onclick=function(){alert('a');}});效果如图:点击【进入】后弹出alert提示框。

leaflet如何给popup弹框添加超链接或按钮响应

迅雷下载压缩包完成后文件名乱码的解决方法 #校园分享#Origin如何画频数分布图? 百度网盘如何离线下载? origin入门:[5]origin怎么改线条颜色(上) 文件hash值怎么修改
热门搜索
蝴蝶面具图片 恶搞美女动态图片 观赏鱼的图片 励志的电影 诺曼底登陆电影