小编Tim*_* MG的帖子

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

我已经构建了一个带有渲染地图的地图组件的 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)

mapbox reactjs react-map-gl

4
推荐指数
2
解决办法
4065
查看次数

标签 统计

mapbox ×1

react-map-gl ×1

reactjs ×1