reactjs react-map-gl缩放Map时标记移动

0lvr5msh  于 2023-03-22  发布在  React
关注(0)|答案(2)|浏览(154)

我构建了一个带有Map组件的React应用,它可以渲染Map。我尝试添加一个标记,但是当我缩放时,标记一直在移动。是什么导致了这种情况?

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;
hfwmuf9z

hfwmuf9z1#

问题是我的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

i7uaboj4

i7uaboj42#

对于我来说,解决方案是不同的。出于某种原因,标记对象被渲染为使其左上角固定在指定位置。这与标记的底部中间固定在该位置的惯例不同。结果是,当您缩小时,所有标记角似乎都改变了Map上的位置,除了左上角。通过添加以下内容解决了这个问题:

style={{
  width: "50px",
  height: "50px",
  position: "relative",
  top: "-50px",
  left: "-25px",
}}

到我的标记JSX,使它的底部中间固定,而不是

相关问题