react-map-gl 标记在缩放地图时移动

Question

我构建了一个带有地图组件的 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;

Answer 1

问题是我的 index.html:

中缺少这一行

<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">

文档没有告诉你任何关于它的信息，必须在这个例子的源代码中找到它：https://github.com/visgl/react-map-gl/tree/7.0-release/examples/controls

react-map-gl 标记在缩放地图时移动

react-map-gl Marker is moving when zooming the map

reactjs

mapbox

react-map-gl