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>
)