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

Question

我正在制作这个 React-Leaflet map 。我想根据用户提供的输入更新 MapContainer 的“center”属性的值，但它不起作用。
我知道，在这种情况下会使用 FlyTo()、panTo() 等方法，但我不知道在哪里/如何应用它们......请帮忙。
这是codesandbox https://codesandbox.io/s/stoic-lamport-kk8mj?file=/src/App.js的链接

Answer 1

来自官方docs :

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

因此，当您更改中心变量时，中心不会更改。创建一个函数，在下拉选择更改时更改 map 中心

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]
},

此外，国家变量不必是状态变量，因为您不需要更改它。它应该是一个常数。

控制台中还会出现错误，因为您在 select 元素上使用数组，该元素在使用数组时期望进行多重选择，但显然您不希望这样做。

最后但并非最不重要的一点是，您应该以某种方式处理“无”选择，因为选择“无”时会发生错误。