React MapBox:标记在缩放上移动

Question

这个问题已经被问了很多次，但似乎没有一个解决方案能解决问题。

当我缩小时，我的所有标记都会移动到位置之外。

这是我的App.js:

import * as React from "react";
import Map, { Marker } from "react-map-gl";
function App() {
return (
<Map
initialViewState={{
longitude: -100,
latitude: 40,
zoom: 3.5,
}}
mapStyle="mapbox://styles/mapbox/streets-v9"
mapboxAccessToken={process.env.REACT_APP_MAPBOX}
style={{ width: "100vw", height: "100vh" }}
>
<Marker longitude={-100} latitude={40} anchor="bottom">
<img src="./pin.png"/>
</Marker>
</Map>
);
}
export default App;

这里是index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import 'mapbox-gl/dist/mapbox-gl.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);

没有额外的样式

Answer 1

我也遇到了同样的问题，这让我头疼了好几天。。。但我通过添加这个导入"mapbox-gl/dist/mapbox-gl.css"修复了我的问题。试试看它是否有效。它应该起作用。呵呵。。。

Answer 2

我遇到了同样的问题，我按照以下步骤进行了修复：

1. 转到你的index.js
2. 添加导入"mapbox gl/dist/mapbox gl.css">

您可以查看以下链接：https://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/