基于leaflet地图实现点击点位图标，在图标边上展示信息弹窗的方案

最新推荐文章于 2025-03-13 14:50:25 发布

YorcentLuo

最新推荐文章于 2025-03-13 14:50:25 发布

阅读量2.1k

点赞数 10

本文链接：https://blog.youkuaiyun.com/yorcentroll/article/details/135776860

版权

本文介绍了如何在Leaflet地图中实现点击点位图标显示信息弹窗，提供了两种方案：利用leaflet内置的popup和自定义弹窗组件。前者虽简便但受限于样式和交互，后者则更具灵活性，可根据实际需求定制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章标题很直观明显了，所以正文就直入主题。

leaflet组件其实很友好了，基本上能解决大部分网页端地图的大部分常用需求。

现在，要实现点击点位图标，在图标边上展示信息弹窗这个需求。提供两个思路：

1. 利用leaflet自带的popup类。

2. 展示完全自定义的弹窗组件。

先说方案一：

点打点，然后获取到marker对象。

然后利用L.popup()方法，构造一个popup弹窗，代码如下：

marker.on('click', data => {
   L.popup()
   .setLatLng(data.latlng) // 设置弹窗出现的位置为点击的经纬度
   .setContent('测试') // 设置弹窗的内容为相关信息
   .openOn(this.mapObj) // 在地图上打开弹                
})

很简单吧，这样就直接将弹窗绑定在了marker上，位置也不需要操心，弹窗就是跟着marker走的。

但是这个方案有个问题，就是setContent()方法传的参数虽然支持html片段，但是如果产品要求你的弹窗要美观，好看，特别是要和系统的其他弹窗一样的风格，那就惨了。

这个html片段可能就很长，而且样式也不好调。

还有一个重要的问题是，弹窗里如果要支持和别的组件互动，需求有其他业务逻辑，就更费力了。

当然也能解决。比如，需要传递一个click事件，如：