未正确显示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的文件夹的链接。