需要有效的 Mapbox 令牌，但我不工作

Question

我尝试使用集成的 mapbox 地图设置一个反应应用程序。 当我启动应用程序时，它说访问令牌无效。但是我在网站上使用了公共令牌。

VM68 react_devtools_backend.js:4061 Error: **A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://account.mapbox.com/**
    at $t.errorCb (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32679:240)
    at $t.getSessionAPI (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:900:22)
    at Map._authenticate (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32676:13)
    at Map._render (vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32645:91)
    at Map.map._render (bundle.js:34693:17)
    at vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32737:73
overrideMethod @ VM68 react_devtools_backend.js:4061
onError @ bundle.js:33707
Mapbox._onEvent @ bundle.js:34564
fire @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:1203
_fireEvent @ bundle.js:34996
(anonymous) @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32679
getSessionAPI @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:900
_authenticate @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32676
_render @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32645
map._render @ bundle.js:34693
(anonymous) @ vendors-node_modules_mapbox-gl_dist_mapbox-gl_js.chunk.js:32737

我创建了一个 .env.local 并将其与我的 App.js 连接起来。所以我不明白为什么这不起作用。这是我的 App.js：

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



export default function App() {
  const [viewport,setViewport] = useState ({
    longitude:-9.993682,
    latitude: 53.551086,
    zoom: 9,
    width: '100vw',
    height: '100 vh',
  });

  return (
    <div>
      <ReactMapGL
        {...viewport} mapboxApiAccessToken= {process.env.REACT_APP_MAPBOX_TOKEN}>
      </ReactMapGL>
    </div>
  );
}

在网站上只发生一件事：一个灰色的小方块在点击时悬停，但我应该显示地图...

这里有人可以帮忙吗？

这是我的 .env.local：

REACT_APP_MAPBOX_TOKEN="pk.eyJ1IjoibG91c2NoYSIsImEiOiJja3pibmZsZTYwbm1nMm9zNmdpdmJwYW5lIn0.qy5kQf2SjEf4CkSg4JcY1Q"

这是我的文件夹结构：

Folderstructure

Answer 1

您必须提供不带引号的REACT_APP_MAPBOX_TOKEN：REACT_APP_MAPBOX_TOKEN=pk.eyJ1IjoibG91c2NoYSIsImEiOiJja3pibmZsZTYwbm1nMm9zNmdpdmJwYW5lIn0.qy5kQf2SjEf4CkSg4JcY1Q

为了让人们不要滥用您的 Mapbox Token，您应该考虑生成一个新的。