Leaflet中如何判断map.fitBounds是否实际修改了地图范围？

要区分“点击要素缩放”和“已缩放后跳转详情”两种场景，核心是提前判断当前地图视图是否已经适配目标要素的边界，不需要再执行缩放/平移操作。以下是具体实现方案：

方法一：判断当前地图边界是否包含目标要素边界 #

利用Leaflet的LatLngBounds.contains()方法，检查当前地图的可视范围是否已经完全包含目标要素的边界。如果已经包含，说明不需要再缩放，直接跳转详情页；否则执行缩放。

修改后的代码：

function zoomToFeature (e) {
  const targetBounds = e.target.getBounds();
  const currentMapBounds = map.getBounds();

  // 检查当前地图是否已经完整包含目标要素的边界
  const isAlreadyFitted = currentMapBounds.contains(targetBounds);

  if (!isAlreadyFitted) {
    map.fitBounds(targetBounds);
  } else {
    // 跳转到要素信息页面，替换为你的实际地址
    window.location.href = `/feature-details/${e.target.feature.properties.id}`;
  }
}

function onEachFeature (feature, layer) {
  layer.on({
    click: zoomToFeature
  })
}

L.geoJson(geoJsonFeatureCollection, {
  style,
  onEachFeature
}).addTo(map)

方法二：结合缩放级别精确判断 #

如果需要更精确的判断（比如当前地图已经显示要素，但缩放级别还能更高），可以用map.getBoundsZoom()计算适配目标边界所需的最大缩放级别，再和当前缩放级别对比：

function zoomToFeature (e) {
  const targetBounds = e.target.getBounds();
  const currentZoom = map.getZoom();
  const currentMapBounds = map.getBounds();

  // 计算适配目标边界的最优缩放级别
  const targetZoom = map.getBoundsZoom(targetBounds);

  // 判断条件：当前缩放级别≥目标级别，且地图边界包含目标要素
  const isAlreadyFitted = currentZoom >= targetZoom && currentMapBounds.contains(targetBounds);

  if (!isAlreadyFitted) {
    map.fitBounds(targetBounds);
  } else {
    window.location.href = `/feature-details/${e.target.feature.properties.id}`;
  }
}

适配带padding的fitBounds场景 #

如果你的fitBounds使用了padding参数（比如map.fitBounds(targetBounds, { padding: [20, 20] })），需要计算带padding后的目标边界再做判断：

function getPaddedBounds(bounds, padding, map) {
  const mapSize = map.getSize();
  const paddingTL = L.point(padding[0], padding[1]);
  const paddingBR = L.point(padding[0], padding[1]);
  const targetZoom = map.getBoundsZoom(bounds, false, paddingTL.add(paddingBR));
  const center = bounds.getCenter();
  const sw = map.project(center, targetZoom).subtract(mapSize.divideBy(2)).add(paddingTL).unproject(targetZoom);
  const ne = map.project(center, targetZoom).add(mapSize.divideBy(2)).subtract(paddingBR).unproject(targetZoom);
  return L.latLngBounds(sw, ne);
}

// 在zoomToFeature中使用
function zoomToFeature (e) {
  const targetBounds = e.target.getBounds();
  const paddedTargetBounds = getPaddedBounds(targetBounds, [20, 20], map);
  const currentMapBounds = map.getBounds();

  const isAlreadyFitted = currentMapBounds.contains(paddedTargetBounds);

  if (!isAlreadyFitted) {
    map.fitBounds(targetBounds, { padding: [20, 20] });
  } else {
    window.location.href = `/feature-details/${e.target.feature.properties.id}`;
  }
}

内容的提问来源于stack exchange，提问作者João Pimentel Ferreira