话不多说，先上成果：

成果一：

成果二：

在平时工作中，常常遇到这种问题，两个或者多个点位齐全重合了，鼠标无奈点击到被遮蔽的点位，从而无奈查看其气泡信息。之前看到有些同学的解决形式是，间接批改点位坐标，让点位不再重合，从而能够点击到每个点位。在此咱们暂不评论此形式是否可取。

明天咱们从另外两个维度来探讨，如何解决此问题。

计划一 PopupListLayer：

此计划的解决形式是，点击时获取与该点位重合的所有点位，而后整合须要在气泡中展现的内容，增加切换性能，达到切换展现所有气泡信息的成果

外围代码如下：

咱们将该办法封装成插件，援用插件后，只需简略的两步即可实现下面成果。

第一步：初始化popupListLayer

var popupListLayer = new L.popupListLayer().addTo(map)

第二步：将点位以及气泡内容传入popupListLayer

popupListLayer.addMarker(marker, contentHTML)

计划二 PopupLayoutLayer：

此计划次要是借鉴在GIT上发现的leaflet-tooltip-layout这个插件。通过解决L.tooltip()地位关系，实现多气泡信息展现，同时尽可能防止气泡之间的遮蔽。该计划反对通过点击点位展现气泡以及同时展现所有点位气泡。

通过点击点位展现气泡

同时展现所有点位气泡

咱们将该办法封装成插件，援用插件后，只需简略的三步即可实现上述成果。

第一步：初始化popupLayoutLayer。如需查看所有点位气泡，需将 showAll 参数设置为 true，默认为false，点击查看气泡信息。

var popupLayoutLayer = new L.popupLayoutLayer({     showAll: true // true，显示所有气泡；默认为 false，通过点击查看气泡，}).addTo(map)

第二步：将点位以及气泡内容传入popupLayoutLayer

popupLayoutLayer.addMarker(marker, contentHTML)

第三步：分为点击查看气泡和展现所有气泡两种状况

1、点击查看气泡。增加点击事件，在点击事件中增加气泡

popupLayoutLayer.on('click', function(evt) {})

2、展现所有气泡，需将showAll 参数设置为 true

popupLayoutLayer.showPopup()

总结

  1. 在地图上增加点位时，常遇到点位坐标重合，无奈点击到被遮蔽的点位，从而无奈查看其气泡信息。
  2. 解决方案一，援用PopupListLayer插件，通过切换内容展现。
  3. 解决方案二，援用PopupLayoutLayer插件，通过解决L.tooltip()地位关系，实现多tooltip同时展现，点击tooltip显示详细信息。
  4. PopupLayoutLayer插件反对通过对重合点位的点击来展现气泡信息，以及同时展现所有点位气泡信息。

在线示例

PopupListLayer 切换显示气泡

PopupLayoutLayer 显示所有气泡

PopupLayoutLayer 点击显示气泡

残缺代码

参考内容

https://github.com/ZijingPeng...

原文地址：http://gisarmory.xyz/blog/index.html?blog=LeafletPopupLayoutLayer。

关注《GIS兵器库》公众号， 第一工夫取得更多高质量GIS文章。

本文章采纳 常识共享署名-非商业性应用-雷同形式共享 4.0 国内许可协定 进行许可。欢送转载、应用、从新公布，但务必保留文章署名《GIS兵器库》（蕴含链接： http://gisarmory.xyz/blog/），不得用于商业目标，基于本文批改后的作品务必以雷同的许可公布。