React-Leaflet-js 中的 MapContainer 中的中心不会更新

Question

我最近开始使用 React.js，并且正在使用 React-Leaflet-js 进行项目。 我的问题是，每当以下代码中的position变量更新时，我的MapContainer都不会更改页面的center ：

...
  render() {
    const position = [this.state.location.lat, this.state.location.lng];
    return (
      <MapContainer
      className="map"
      center={position}
      zoom={this.state.zoom}
      scrollWheelZoom={true}>
...

作为参考，正在更新的state变量如下所示：

    state = {
    location: {
      lat: 40.7128,
      lng: -74.0060,
    },
    haveUsersLocation: false,
    zoom: 13,
  }

奇怪的是， position设置为{position}的marker会在position变量发生变化而不是MapContainer的center时自动更新。 我不确定为什么map没有响应并调整其center 。

注意：我尝试查看此内容，但没有回答我的问题。 请帮忙。

Answer 1

center属性只是初始化地图，如果你想更新实际显示的地图的中心，如果你想要平滑的动画，你必须使用setView或flyTo 。 为了获得 Leaflet Map 参考，您需要使用钩子useMap 。

function FlyMapTo() {

    const map = useMap()

    useEffect(() => {
        map.flyTo(position)
    }, [position])

    return null
}

return (
<MapContainer
      className="map"
      center={position}
      zoom={this.state.zoom}
      scrollWheelZoom={true}>
    <FlyMapTo />
</MapContainer>
)