如何点击HTML DOM元素打开Leaflet地图中已存在的Popup弹窗（仅用Vanilla JS）

你需要先建立「See in map」DOM元素和对应Leaflet标记的关联关系，点击元素时调用标记内置的openPopup()方法即可，完整实现步骤如下： #

步骤1：初始化时建立关联 #

创建标记的同时，给对应「See in map」元素添加关联标识，推荐两种方式二选一：

• 方式一：把所有标记存入数组，给DOM元素加自定义属性存对应标记的数组索引
• 方式二：直接把标记实例挂载到DOM元素的自定义属性上，不用额外维护数组

步骤2：绑定点击事件触发弹窗 #

用你已知的L.DomEvent.on绑定点击事件，获取到对应标记后调用API打开弹窗即可。 #

// 示例位置数据，可替换为你自己的业务数据
const shopList = [
  {name: '店铺A', lat: 39.9042, lng: 116.4074, desc: '这是店铺A的详情'},
  {name: '店铺B', lat: 31.2304, lng: 121.4737, desc: '这是店铺B的详情'}
]
const markers = []
const map = L.map('map').setView([39.9042, 116.4074], 10)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map)

// 1. 循环创建标记+绑定关联
shopList.forEach((shop, index) => {
  // 创建标记并绑定原本的Popup
  const marker = L.marker([shop.lat, shop.lng]).addTo(map)
  marker.bindPopup(`<h3>${shop.name}</h3><p>${shop.desc}</p>`)
  markers.push(marker)
  // 给对应「See in map」按钮加关联标识
  const seeMapBtn = document.querySelectorAll('.see-in-map')[index]
  seeMapBtn.dataset.markerIndex = index
})

// 2. 绑定点击事件打开弹窗
document.querySelectorAll('.see-in-map').forEach(btn => {
  L.DomEvent.on(btn, 'click', function(e) {
    // 阻止默认行为，避免按钮为a标签时跳转
    L.DomEvent.preventDefault(e)
    // 获取对应标记
    const targetMarker = markers[this.dataset.markerIndex]
    // 可选：平滑移动地图到标记位置
    map.panTo(targetMarker.getLatLng())
    // 打开对应Popup
    targetMarker.openPopup()
  })
})

• 如果是单个元素绑定，不需要循环维护数组，直接关联对应标记即可，写法更简单：

const singleBtn = document.querySelector('#see-in-map-01')
const singleMarker = L.marker([39.9, 116.4]).addTo(map).bindPopup('测试弹窗')
L.DomEvent.on(singleBtn, 'click', e => {
  L.DomEvent.preventDefault(e)
  singleMarker.openPopup()
})

• 不需要移动地图视野的话，直接删除map.panTo相关代码即可
• 标记和元素的关联逻辑可以根据你的业务场景调整，只要能点击时拿到对应标记实例就行，不需要完全照搬数组索引的方式

内容的提问来源于stack exchange，提问作者Natacha Vergara