Leaflet多标记弹窗全显示及点击地图不关闭弹窗问题求助

我来帮你搞定这两个Leaflet地图的弹窗需求，这俩点确实需要调整Leaflet的默认行为，下面是具体的实现方案：

1. 实现多标记弹窗同时显示 #

Leaflet默认会在打开新弹窗时自动关闭其他弹窗，要打破这个限制，你需要在创建每个弹窗的时候设置autoClose: false，然后手动打开所有标记的弹窗。

举个完整的代码例子：

// 先初始化地图（后面还要加关键配置）
const map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

// 模拟你的标记数据，可以替换成你自己的数据源
const markerList = [
  { coords: [51.505, -0.09], popupContent: '<b>标记1</b><br>这是第一个标记的弹窗内容' },
  { coords: [51.51, -0.1], popupContent: '<b>标记2</b><br>这是第二个标记的弹窗内容' },
  { coords: [51.508, -0.105], popupContent: '<b>标记3</b><br>这是第三个标记的弹窗内容' }
];

// 循环创建标记和弹窗
markerList.forEach(item => {
  const marker = L.marker(item.coords).addTo(map);
  // 创建弹窗时开启autoClose: false，禁用自动关闭其他弹窗的默认行为
  const popup = L.popup({ autoClose: false })
    .setContent(item.popupContent);
  marker.bindPopup(popup);
  // 手动打开每个标记的弹窗
  marker.openPopup();
});

2. 实现点击地图时不关闭弹窗 #

Leaflet默认点击地图空白区域会关闭所有弹窗，要禁用这个行为，只需要在初始化地图的时候添加closePopupOnClick: false配置项：

// 修改后的地图初始化代码，加入关键配置
const map = L.map('map', {
  closePopupOnClick: false // 核心配置：点击地图空白区不关闭弹窗
}).setView([51.505, -0.09], 13);

把这两部分结合起来，你就能实现所有标记弹窗同时显示，并且点击地图时弹窗保持打开的效果了。如果还有其他细节需要调整，比如弹窗的位置、样式，都可以通过Popup的配置项进一步定制~

内容的提问来源于stack exchange，提问作者敬錞 潘