react-map-gl加载用户所在位置的地图

Question

使用react 18和react-map-gl 7.0.11，我无法加载用户所在位置的地图。

我能够使用GeoLocateControl组件在屏幕上获得这个按钮https://i.stack.imgur.com/fBy1y.png

<Map
{...viewState}
reuseMaps
mapStyle="mapbox://styles/mapbox/streets-v9"
mapboxAccessToken={process.env.REACT_APP_MAPBOX_KEY}
onMove={(evt) => setViewState(evt.viewState)}
>
<GeolocateControl
positionOptions={{
enableHighAccuracy: true,
}}
trackUserLocation={true}
onGeolocate={(pos) => {
setViewState({
...viewState,
longitude: pos.coords.longitude,
latitude: pos.coords.latitude,
});
}}
/>
</Map>

是否有一种方法可以触发按钮单击以将地图和蓝点移动到组件(地图)上用户的当前位置，而无需设置事件侦听器?我尝试了声明ref的方法，并使用useCallback来触发ref，但它不起作用。

有什么建议吗?

Answer 1

根据https://blog.logrocket.com/using-mapbox-gl-js-react/:，您可以这样做:

function MyMap() {
const [viewport, setViewport] = useState({});
useEffect(() => {
navigator.geolocation.getCurrentPosition((pos) => {
setViewport({
...viewport,
latitude: pos.coords.latitude,
longitude: pos.coords.longitude,
zoom: 3.5,
});
});
}, []);
return (
<div>
{viewport.latitude && viewport.longitude && (
<div>
<h1>Your Location:</h1>
<Map
mapboxAccessToken="MAPBOX_TOKEN"
initialViewState={viewport}
mapStyle="mapbox://styles/mapbox/streets-v11"
>
<Marker
longitude={viewport.longitude}
latitude={viewport.latitude}
/>
</Map>
</div>
)}
</div>
);
}