我已经构建了一个带有渲染地图的地图组件的 React 应用程序。我尝试添加标记,但缩放时标记不断移动。是什么原因导致这种情况发生?
import MapGL, { Marker } from "react-map-gl"
import { useState } from "react";
const Map = () => {
const [viewState, setViewState] = useState({
longitude: 4.895168,
latitude: 52.370216,
zoom: 10,
})
const [marker] = useState({
longitude: 4.895168,
latitude: 52.370216,
})
return (
<div className="map">
<MapGL
{...viewState}
style={{ width: "100%", height: "100%" }}
mapStyle="mapbox://styles/mapbox/streets-v9"
onMove={(evt) => setViewState(evt.viewState)}
mapboxAccessToken="my_token"
>
<Marker
{...marker}
/>
</MapGL>
</div>
)
}
export default Map;
Run Code Online (Sandbox Code Playgroud)