Leaflet Popup添加链接按钮

在 Leaflet 中可通过自定义 popup 弹窗内容实现添加 HTML 标签，如超链接或按钮。超链接可直接跳转页面，而按钮需绑定点击事件来触发相应操作，从而实现通过弹窗跳转至子页面或特定场景的功能。

1、 先查看效果图：地图上显示可自定义图标的标记点，点击标记后弹出信息窗口，窗口内包含提示内容及一个进入按钮，点击该按钮可触发相应操作。

2、 在地图上设置可自定义图标的标记点，点击标记后弹出信息窗口，窗口中显示指定提示内容，并包含一个超链接，用户点击该链接即可触发相应操作，实现交互功能。

3、 要实现这一效果，可参照Leaflet官网示例，逐步完成基础操作：创建地图、添加标记点、设置弹出窗口。这些功能在官网示例中清晰明了，便于快速掌握和应用，所示，学习过程简单直观。

4、 在弹框的content属性中添加HTML标签，将其与提示内容拼接即可实现自定义内容展示。

5、 弹出窗口显示内容为1号点，并包含一个带有进入文字的按钮，用户点击该按钮可触发相应操作，界面简洁直观，便于交互与信息展示。

6、 弹出框显示内容为2号点，并附带一个标有进入的按钮，用户点击该按钮可触发相应操作，实现页面交互功能。

7、 效果见下图。

8、 可以这样实现：通过添加超链接的方式，将内容设置为1号点进入，并嵌入到弹窗组件中。所示，点击该链接后即可跳转至百度网页，实现页面间的导航交互功能。

9、 注意，为按钮添加点击事件时，不能像超链接那样直接处理，需通过其id或class属性获取对应元素。通常可使用document.getElementById()方法选中按钮，再为其绑定onclick事件，从而实现点击响应功能。

10、 需要解决的关键问题是：如何确保事件绑定代码在目标元素存在后才执行。由于按钮是在弹框显示时动态生成的，而`document.getElementById(btnCon).onclick`这类绑定方式要求元素必须已存在于页面中，若将绑定代码直接写在脚本开头，此时弹框尚未创建，元素无法获取，导致绑定失败。因此，必须将事件绑定操作延迟到弹框内容渲染完成之后执行。一种可行的做法是将绑定代码放入弹框生成后的回调函数或显示逻辑的后续步骤中，确保此时DOM元素已经就位。此外，也可采用事件委托机制，将事件监听绑定到父级容器上，利用事件冒泡捕获目标元素的点击行为，从而避免因元素尚未生成而导致的绑定失效问题。

11、 在 Leaflet 中，popupopen 事件会在弹窗开启前触发，可利用该时机绑定按钮的点击事件，从而实现所需功能。

12、 }

13、 });

14、 点击后，弹出提示框，效果见图示。