Mapbox 无法正确加载 NextJS

Question

我想使用 NextJS 和 React 组件来实现 mapbox (mapbox-gl)。地图出现了，但是有问题，如下图所示：

此外，如果我添加与地图具有相同纬度的标记，该标记将无法正常工作。如果我缩放，标记就会移动。

此外，我无法调整地图大小。

这是我的代码：

import React, { useState } from "react";
import ReactMapGl, {Marker} from "react-map-gl";

const TOKEN = "TOKEN";

export default function App() {
    const [viewport, setViewport] = useState({
        latitude: 3.597031,
        longitude: 98.678513,
        zoom: 10,
        width: "100vw",
        height: "100vh"
    });
    return (    
                <ReactMapGl
                    mapboxAccessToken={TOKEN}
                    mapStyle="mapbox://styles/mapbox/light-v10"
                    {...viewport}
                    onViewportChange={ viewport => {
                        setViewport(viewport);
                    }}
                />
    )
}

我已经遵循了各种教程和文档，但没有找到答案。 请帮助我，以便我的地图能够正常工作。 预先感谢。

Answer 1

您尚未向其中添加任何标记或其他元素。尝试添加标记以查看地图是否正确加载。例如：

<ReactMapGl
    mapboxAccessToken={TOKEN}
    mapStyle="mapbox://styles/mapbox/light-v10"
    {...viewport}
    onViewportChange={viewport => {
        setViewport(viewport);
    }}
>
    {/* Add markers or other map elements here */}
    <Marker latitude={3.597031} longitude={98.678513}>
        <div>My location / Location icon</div>
    </Marker>
</ReactMapGl>

参见 https://visgl.github.io/react-map-gl/docs/api-reference/marker 参考