React Leaflet Bound 没有按预期工作

Question

我正在使用 react-leaflet 包根据所选标记在地图上创建绑定动画，如下面的屏幕截图所示。

完整代码如下：https://codesandbox.io/s/react-leaflet-marker-with-bound-869mj

只有选择的标记发生变化时才会绑定地图。

我尝试从这里的文档中实现绑定的动画示例代码https://react-leaflet.js.org/docs/example-view-bounds/

正如我们从上面的屏幕截图中看到的那样，地图、标记、矩形和面板（右上角）正在显示并且工作正常。

但是如果我们改变选择的标记（通过面板），绑定的动画不能正常工作（不显示所有的标记）。

如果我们清空所选标记（面板中未选择任何标记），应用程序会崩溃并产生错误 Cannot read properties of undefined (reading 'lat').

所以，我的问题是：

怎么会这样？
解决方法是什么？

Answer 1

错误 Cannot read properties of undefined (reading 'lat') 是因为您将一个空的标记数组传递给 <Rectangle>。您至少需要两个标记来定义矩形角，因此请检查您是否至少有两个：

{/* RECTANGLE */}
{markerList && markerList.length >= 2 && (
  <Rectangle bounds={markerList} pathOptions={{ color: "red" }} />
)}

Answer 2

最后，我直接在onCheckboxChange函数中更新bounds（位置列表）的最新值后就可以做到了。所以 useEffect 与 selectedPlaces 的钩子不再需要了。

const onCheckboxChange = (inputIndex) => {
  let newPlaces = [...selectedPlaces];
  newPlaces[inputIndex].selected = !newPlaces[inputIndex].selected;
  setSelectedPlaces(newPlaces);

  let newBounds = selectedPlaces.filter((item) => item.selected);
  newBounds = newBounds.map((item) => item.location);
  setBounds(newBounds);
  map.fitBounds(newBounds);
};

useEffect(() => {
  map.fitBounds(initialBounds);
}, []);

这是工作演示：https://codesandbox.io/s/learn-react-leaflet-cnk8tm

React Leaflet Bound 没有按预期工作

React Leaflet Bound not working as expected

javascript

leaflet

reactjs

react-leaflet