React Leaflet bound动画不生效及清空选中标记报错问题

问题1：修改选中标记时边界动画未生效、无法完整展示所有选中标记 #

产生原因 #

react-leaflet 的 MapContainer 组件的 bounds 属性为初始化只读属性，仅在组件首次挂载时生效，后续更新该属性不会触发地图视图重绘。另外如果计算边界的逻辑存在遗漏，也会导致部分选中标记没有被纳入边界范围。

解决方法 #

1. 使用 useMap 钩子获取地图实例，不要依赖 MapContainer 的 bounds 属性做动态更新
2. 监听选中标记的状态变化，在状态变更的 useEffect 回调中手动触发边界适配：

useEffect(() => {
  const map = useMap()
  // 先判断选中标记非空再执行适配
  if (selectedMarkers.length === 0) return
  // 初始化边界实例
  const bounds = new L.LatLngBounds()
  // 遍历所有选中标记，将坐标纳入边界
  selectedMarkers.forEach(marker => {
    bounds.extend([marker.lat, marker.lng])
  })
  // 执行带动画的边界适配，设置内边距避免标记贴到地图边缘
  map.fitBounds(bounds, {
    padding: [30, 30],
    animate: true,
    duration: 0.5 // 动画时长单位为秒，可自定义
  })
}, [selectedMarkers])

问题2：清空全部选中标记时应用崩溃，报错 Cannot read properties of undefined (reading 'lat') #

产生原因 #

清空选中标记后，选中标记数组变为空数组，代码中没有做空判断就直接访问数组元素的经纬度属性，比如直接写 selectedMarkers[0].lat 这类逻辑，空数组的第0项为 undefined，读取其 lat 属性就会抛出该错误。

解决方法 #

在所有涉及读取选中标记经纬度的逻辑前，先增加数组非空判断：

// 只要选中标记数组为空，就跳过所有访问经纬度的逻辑，也可以自定义切换到初始视野
if (!selectedMarkers || selectedMarkers.length === 0) {
  // 可选：清空后回到默认初始视野
  // map.setView([默认纬度, 默认经度], 默认缩放层级)
  return
}
// 后续再执行边界计算、取值等逻辑

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