我构建了一个带有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;
2条答案
按热度按时间hfwmuf9z1#
问题是我的index.html中缺少了一行:
文档没有告诉你关于它的任何信息,必须在这个例子的源代码中找到它:https://github.com/visgl/react-map-gl/tree/7.0-release/examples/controls
i7uaboj42#
对于我来说,解决方案是不同的。出于某种原因,标记对象被渲染为使其左上角固定在指定位置。这与标记的底部中间固定在该位置的惯例不同。结果是,当您缩小时,所有标记角似乎都改变了Map上的位置,除了左上角。通过添加以下内容解决了这个问题:
到我的标记JSX,使它的底部中间固定,而不是