更改React传单地图的中心位置

Question

所以我想做的是，在获得用户lat和lng后，我想更改地图的中心，下面的代码将使问题更加清楚：

<LeafletMap
center={this.state.UserCurrentPosition}
zoom={17}
maxZoom={20}
attributionControl={true}
zoomControl={false}
doubleClickZoom={true}
scrollWheelZoom={true}
dragging={true}
animate={true}
easeLinearity={0.35}
>
<TileLayer url='https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'/>
<Marker 
position={this.state.UserCurrentPosition} 
icon={L.divIcon({
className: 'user-marker',
html: `<div  class='icon icon-location'><span class="circle"></span></div>`,
iconSize: [40, 40],
iconAnchor: [24, 24]
})}>
</Marker>
</LeafletMap>

下面是我要做的：

componentDidMount() {
navigator.geolocation.getCurrentPosition(this.showPosition);
}
showPosition = (position) => {
this.setState({ UserCurrentPosition: [position.coords.latitude, position.coords.longitude] })
}

因此，在我使用setState更改用户的当前位置后，标记的位置会更新，但地图的位置不会，所以我想知道我是否做错了什么，或者如何完成。

Answer 1

我相信center属性只是初始化映射。

更新状态时，需要调用类似map.panTo(LatLng)或map.setView()的映射函数。

您可以按照本例使用useMap()挂钩https://react-leaflet.js.org/docs/example-animated-panning

Answer 2

创建一个单独的组件，如下所示：

const RecenterAutomatically = ({lat,lng}) => {
const map = useMap();
useEffect(() => {
map.setView([lat, lng]);
}, [lat, lng]);
return null;
}

在MapContainer 中调用此组件

<MapContainer center={[lat, lon]} zoom={80} scrollWheelZoom={true}>
<TileLayer
attribution='<a href="https://www.openstreetmap.org/copyright"></a>'
url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
/>
<Marker position={[lat,lng]}></Marker>
<RecenterAutomatically lat={lat} lng={lng} />
</MapContainer>

因此，只要纬度和lng发生变化，地图就会自动重新定位。。