Mapbox 空白地图 React-map-gl |反应JS答案

【问题标题】：Mapbox blank map React-map-gl | ReactJSMapbox 空白地图 React-map-gl |反应JS
【发布时间】：2020-12-24 06:51:10
【问题描述】：

我正在使用 react 17.0.1 和 react-map-gl ^6.0.2 我有一个地图组件。

我尝试了其他库，但问题仍然存在
我已联系 mapbox 支持
我已联系其他 mapbox 用户

无法解决

当我执行“npm run start”没有问题时，它会显示地图，但是当我执行“npm run build”时，它只会显示：map blank

它会抛出这个错误：error

我的代码如下：

   import React, {useState } from "react";
import ReactMapGL from 'react-map-gl';
const Map = () => {
  const[viewport, setViewport] = useState({
    width: "100%",
    height: "400px",
    latitude: 38.963745,
    longitude: 35.243322,
    zoom: 5
  });
     return (
    <div>
      <h2>Size yakın olan yerleri keşfedin!</h2>
            <ReactMapGL
                 {...viewport}
              onViewportChange={setViewport}
              mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}
              mapStyle="mapbox://styles/mapbox/streets-v11"
           />
          </div>
           );
        }
     export default Map

【问题讨论】：

标签： javascript reactjs mapbox react-map-gl

【解决方案1】：

我知道这是一个旧帖子..

据我了解，原因是 mapbox（不是react-map-gl）中有一个错误，无法使用“npm build”正确转换。

幸运的是，您不必像我在此链接中了解到的那样弹出您的应用程序： https://github.com/mapbox/mapbox-gl-js/issues/10173#issuecomment-753662795

我不得不npm install worker-loader

然后添加以下行。

    // had this.
    import ReactMapGL, { FlyToInterpolator, NavigationControl } from 'react-map-gl';    import 'mapbox-gl/dist/mapbox-gl.css';


    // added the following 6 lines.
    import mapboxgl from 'mapbox-gl';

    // The following is required to stop "npm build" from transpiling mapbox code.
    // notice the exclamation point in the import.
    // @ts-ignore
    // eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
    mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

由于我使用的是 typescript 和 linting，我不得不添加一些指令来忽略警告/错误，否则会阻止它编译。

请注意，我不必安装 mapboxgl，因为 react-map-gl 使用它。

但是，我确实需要添加eslint-disable-next-line import/no-unresolved

和eslint-disable-next-line import/no-webpack-loader-syntax 合并在同一行。

我正在使用“react-map-gl”：“^6.1.17”。

【讨论】：

嘿，伙计，我只想说，我在 github 和 mapbox 文档中搜索这个。没有一个“解决方案”奏效。只是想让你知道你的评论拯救了我。上帝保佑！
仅供参考，这也适用于“mapbox-gl”：“^2.7.0”| "react-map-gl": "^7.0.2"

【解决方案2】：

在尝试部署应用程序时，首先我们运行 yarn build。这似乎完成了它的工作，没有构建错误。但是，当我们实际部署它时，例如服务于构建。我们遇到了“referenceError: y is not defined”。

将 Mapbox-gl 的版本降级到 1.13.0 时。构建工作得很好。在问题解决之前，我们必须这样做。

以下步骤：

运行 yarn install 或 npm install
运行 yarn build 或 npm build

【讨论】：

【解决方案3】：

问题是由转译器引起的。这是 Mapbox 正在处理的一个错误。按照这里的建议：

https://github.com/mapbox/mapbox-gl-js/issues/10173

它现在也在官方文档中。

https://docs.mapbox.com/mapbox-gl-js/api/#transpiling-v2

【讨论】：

【解决方案4】：

仅将宽度和高度设为数字

const[viewport, setViewport] = useState({
    width: "100",
    height: "400",
    latitude: 38.963745,
    longitude: 35.243322,
    zoom: 5
});

【讨论】：