使用 react-map-gl 和 create-react-app 时地图不显示

Question

我正在使用 create react 应用程序以及 react-map-gl。我现在只需要地图显示在屏幕上，但它所做的只是显示 mapbox 徽标并在地图应该显示的位置有一个空白 space。这是我的主要 .js 文件：

    import './App.css';
    import ReactMapGL from 'react-map-gl';
    import React, {useState} from 'react';

    function App() {
      const [viewport, setViewport] = useState({
        width: 400,
        height: 400,
        latitude: 38.958630,
        longitude: -77.357002,
        zoom: 10
      });
      return (
        <div className="TextStuff">
          <ReactMapGL {...viewport}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}>MAPPPPP</ReactMapGL>
        </div>
      );
    }

    export default App;

Answer 1

经过调查，我得出的结论是您的令牌未通过 process.env 正确传递到您的组件。我创建了一个 reproducible example，带有一个有效的令牌，它运行得很好。提供无效令牌时，我得到的结果与您相同。所以我猜你得到的是未定义的令牌，或者类似的东西。

在此 tutorial 之后，您应该有一个 .env 文件，您可以在其中存储您的令牌，如下所示： REACT_APP_MAPBOX_TOKEN=MYTOKEN

尝试注销您的 process.env.REACT_APP_MAPBOX_TOKEN，看看您得到了什么。

但我怀疑您将 .env 文件放在了 src 文件夹中。但你不应该把它放在那里。相反，将它放在项目的根目录下，然后重新启动服务器。这样，您应该可以正确获取您的令牌。

使用 react-map-gl 和 create-react-app 时地图不显示

Map not showing up when using react-map-gl and create-react-app

javascript

reactjs

mapbox

react-map-gl