我有一个 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='© <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 的答案依赖于这个回调。
这三个问题的结合意味着我无法让任何旧的解决方案发挥作用。所以我想我会重新问:这些天做这件事的正确方法是什么?