react-mapbox-gl标记没有正确显示

Question

我有一个网站与mapbox，地图本身工作得很好，但我不能添加标记到它。我从一个源代码复制了所有工作的代码，但是当我将它添加到我的项目中时，标记从地图上的正确坐标移动，并且在接近时更加移动。

这是我的代码

import React, { useState } from "react";
import ReactDOM from "react-dom";
import ReactMapboxGl, { Layer, Marker } from "react-mapbox-gl";
import { observer } from "mobx-react-lite";
import state from "../../state/state";
const Map = ReactMapboxGl({
accessToken:
"pk.eyJ1IjoibmFnaHQiLCJhIjoiY2wyYTJrazZxMDFlbzNpbnp0eTNnOG44aCJ9.i3nyiAJBTDyWviIWhsX-Zg",
});
const IndexMap = observer(({ coordinats }) => {
return (
<div style={{ height: "100vh", width: "100%", overflow: "hidden" }}>
<Map
style="mapbox://styles/mapbox/streets-v9" // eslint-disable-line
containerStyle={{
height: "100%",
width: "100%",
}}
center={{
lat: 51.5285582,
lng: -0.2416815,
}}
zoom={[12]}
>
<Marker coordinates={[-0.2416815, 51.5285582]} anchor="bottom">
<h1>marker</h1>
</Marker>
</Map>
</div>
);
});
export default IndexMap;

我认为没有足够的样式让地图将它们设置在正确的位置。

Answer 1

我不知道是什么问题。我只是将项目移动到工作文件的文件夹中。链接到包含工作文件的文件夹-https://codesandbox.io/embed/pwly8?codemirror = 1