使地图的边界适合 React-Leaflet

如何解决使地图的边界适合 React-Leaflet

我有一个 FeatureGroup，里面有一个 Circle。在加载时，我希望地图的视口完全显示圆圈。有许多相关的 StackOverflow 问题（this one、another one、a third），我都试过了。没有人使用现代工具对我有用。

import { MapContainer,TileLayer,FeatureGroup,Circle } from 'react-leaflet'

export default function MyMap({volunteer,pollingPlaces}) {

    const coordinates = [40.781753,-73.966583];
    const circle = <Circle pathOptions={{color: 'purple'}} center={coordinates} radius={3*1609} />

    return (
        <MapContainer center={coordinates}
            style={{
                height:"400px",width: "400px"
            }}>
            <TileLayer
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <FeatureGroup>
                {circle}
            </FeatureGroup>
        </MapContainer>
        )
}

其中一个大问题是 string refs are now deprecated，大多数旧答案都依赖于此。我也不清楚如何在函数组件中使用新的 useMap 钩子和 createRef 方法。 （third approach above 似乎最接近，并且是一年前的，但它仍然依赖于 componentDidMount。）最后，我无法让我的 FeatureGroup 调用 {{1} } 或 onAdd 方法（不清楚 which is correct？请参阅答案下方的评论...）当我将它传递给组件时。 2018 的答案依赖于这个回调。

这三个问题的结合意味着我无法让任何旧的解决方案发挥作用。所以我想我会重新问：这些天做这件事的正确方法是什么？