无法在 React-Leaflet v.3.x 中动态更改中心

Question

我正在处理这个 React-Leaflet 地图。我想根据用户提供的输入更新 MapContainer 的“中心”道具的值，但它不起作用。
我知道，在这种情况下会使用像 flyTo()、panTo() 这样的方法，但我不知道 where/how 应用它们...请帮助。
这是 link 到 codesandbox https://codesandbox.io/s/stoic-lamport-kk8mj?file=/src/App.js

Answer 1

来自官方docs:

Except for its children, MapContainer props are immutable: changing them after they have been set a first time will have no effect on the Map instance or its container.

因此，当您更改中心变量时，中心不会更改。创建一个函数，在下拉菜单 selection change

时更改地图中心

function SetViewOnClick({ coords }) {
  const map = useMap();
  map.setView(coords, map.getZoom());

  return null;
}

将其包含在 MapComp 中

function MapComp({ coords }) {
  return (
    <MapContainer
      classsName="map"
      center={coords}
      zoom={4}
      scrollWheelZoom={false}
    >
      ...
      <SetViewOnClick coords={coords} />
    </MapContainer>
  );
}

Demo

请注意，美国和加拿大的坐标不正确，所以我更改了它们。他们应该是

{
  USA: [39.7837304, -100.4458825]
},
{
  Canada: [61.0666922, -107.9917071]
},

而且 countries 变量不必是状态变量，因为您不需要更改它。它应该是一个常数。

控制台中也有一个错误，因为您在 select 元素上使用了一个数组，该元素在使用数组时需要多个 selection，但显然您不希望这样。

最后但同样重要的是，你应该以某种方式处理 none selection，因为 selecting none.

时会发生错误

无法在 React-Leaflet v.3.x 中动态更改中心

Not able to change center dynamically in React-Leaflet v.3.x

leaflet

reactjs

react-leaflet