Leaflet地图点击机构列表项跳转对应标记后自动打开弹窗实现

你可以通过监听Leaflet地图的moveend事件完成该需求，该事件会在地图平移、缩放的动画完全结束后触发。操作前需要你提前将所有机构对应的marker实例存入可全局访问的对象中，比如用机构id作为键、marker实例作为值的字典：

// 提前初始化好的marker存储字典，你创建机构标记时存入即可
const agencyMarkers = {}

之后修改你的flyTo相关逻辑如下即可：

// 先移除之前可能存在的同业务moveend监听，避免重复触发弹窗
map.off('moveend.openPopupAfterFly')
map.flyTo([json["lat"], json["lon"]], 10, {
  animate: true,
  duration: 1.5
})
// 绑定moveend事件监听，动画结束后打开对应popup
map.on('moveend.openPopupAfterFly', function() {
  // 第二个参数关闭popup默认自动平移，避免地图重复移动
  agencyMarkers[id].openPopup(L.latLng(json["lat"], json["lon"]), {
    panToLocation: false
  })
  // 执行完逻辑后移除当前监听，避免后续操作触发重复逻辑
  map.off('moveend.openPopupAfterFly')
})

上面代码里的.openPopupAfterFly是Leaflet支持的事件命名空间写法，用于精准解绑当前业务的监听事件，不会影响你其他逻辑中绑定的moveend事件。

可选优化 #

如果需要避免用户在动画过程中手动拖动地图导致弹窗误触发，可以添加动画状态标记判断：

• 调用flyTo前设置isFlying = true
• 监听moveend时先判断isFlying为true才执行弹窗逻辑，执行完后设为false
• 也可以额外监听movestart事件，如果是用户手动触发的移动，直接设置isFlying = false取消后续弹窗逻辑

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