Leaflet：如何在zoomend事件中获取选中Marker的latLng以保持其居中？

你需要先跟踪当前选中的Marker，再在缩放结束时让地图聚焦到它的位置，具体实现步骤如下：

• 定义一个变量存储当前选中的Marker：

  let selectedMarker = null; // 用全局或闭包变量保存选中的Marker
  

• 给每个Marker绑定点击事件，标记选中状态（可加样式区分）：

  // 示例：循环创建并绑定Marker点击事件
  const markerList = [
    L.marker([51.5, -0.09]),
    L.marker([51.51, -0.1]),
    // 更多Marker...
  ];
  
  markerList.forEach(marker => {
    marker.addTo(mymap);
    marker.on('click', function() {
      // 清除上一个选中Marker的样式（可选）
      if (selectedMarker) {
        selectedMarker.setIcon(L.icon({iconUrl: '你的默认图标路径'}));
      }
      // 标记当前选中的Marker
      selectedMarker = this;
      // 给选中Marker设置高亮图标（可选，提升辨识度）
      selectedMarker.setIcon(L.icon({iconUrl: '你的选中状态图标路径'}));
      // 点击时直接居中（可选，优化交互体验）
      mymap.setView(selectedMarker.getLatLng());
    });
  });
  

• 修改你的zoomend事件处理函数，利用存储的选中Marker实现居中：

  mymap.on('zoomend', onZoomEnd);
  
  function onZoomEnd(e) {
    console.log("here.onZoomEnd");
    // 确认存在选中的Marker时执行居中
    if (selectedMarker) {
      // 获取选中Marker的坐标，设置地图中心（保留当前缩放级别）
      mymap.setView(selectedMarker.getLatLng(), mymap.getZoom());
      // 若偏好fitBounds也可使用，但单个点场景下setView更高效
      // const markerBounds = L.latLngBounds([selectedMarker.getLatLng()]);
      // mymap.fitBounds(markerBounds);
    }
  }
  

核心说明： #

• selectedMarker变量负责跟踪用户选中的Marker，解决了zoomend事件中无法获取目标坐标的问题。
• 单个Marker的居中需求用setView()比fitBounds()更直接高效，后者更适合适配多点范围。
• 可选的图标样式修改能让用户清晰识别选中状态，提升交互体验。

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