如何使用useMapEvents让React Leaflet地图视图居中到新Marker标记？

解决方案 #

要实现搜索结果返回后地图自动居中到标记位置，你可以按照以下步骤修改代码：

步骤1：新增地图自动居中组件 #

首先在Mobile3.js文件中新增一个独立组件，该组件只能放在MapContainer内部调用，才能拿到leaflet的map实例：

// 放在导入语句下方、Mobile3组件定义上方即可
import { useMap } from 'react-leaflet'

const MapAutoCenter = ({ markers }) => {
  const map = useMap()

  useEffect(() => {
    if (markers.length === 0) return
    // 计算所有标记点的覆盖边界
    const pointBounds = L.latLngBounds(
      markers.map(item => [item.Latitude, item.Longitude])
    )
    // 自动适配视角，padding参数可根据需求调整避免标记贴到地图边缘
    map.fitBounds(pointBounds, { padding: [40, 40] })
  }, [markers, map])

  return null
}

步骤2：将组件挂载到MapContainer中 #

找到你代码里的MapContainer标签，在内部加入这个组件，传入搜索结果clubSearch作为参数：

<MapContainer
  className="mapLeaflet"
  center={[48.856614, 2.3522219]}
  zoom={13}
  scrollWheelZoom={true}
  doubleClickZoom={true}
  zoomControl={true}
>
  <TileLayer
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
  {/* 新增下面这行即可 */}
  <MapAutoCenter markers={clubSearch} />
  <Geolocalisation />
  {/* 其余原有代码保持不变 */}
</MapContainer>

补充说明 #

react-leaflet提供的所有和map实例相关的钩子（包括useMap、useMapEvents）都只能在MapContainer的直接/间接子组件内部调用，直接在父组件Mobile3中调用会因为获取不到map上下文失效。我们把居中逻辑封装成子组件放到MapContainer内部，就可以正常监听搜索结果的变化，自动调整地图视角。

如果不需要适配所有标记，只想居中到第一个搜索结果，把useEffect里的fitBounds逻辑替换成map.setView([markers[0].Latitude, markers[0].Longitude], 14)即可，后面的数字是缩放等级，可自行调整。

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