Mapbox空白地图React-map-gl | ReactJS

Question

Mapbox空白地图React-map-gl | ReactJS

javascriptreactjsmapboxreact-map-gl

11

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

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

无法解决该问题。

当我执行“npm run start”时没有问题，它显示地图，但是当我执行“npm run build”时，它只显示：空白地图并抛出以下错误：错误下面是我的代码：

   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

- Rayberk

7个回答

4

问题由转译器引起。这是一个Mapbox正在解决的错误。请按照此处的建议操作：

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

现在它也在官方文档中。

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

- robinhuang

3

在这里发布的多个链接中，包含了解决我的问题的内容。它修复了导致问题的mapbox转译器错误。

// @ts-ignore
// eslint-disable-next-line import/no-webpack-loader-syntax
import mapboxgl from '!mapbox-gl';

- David Tunnell

1

将宽度和高度仅限定为数字

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

- ketan

1

尝试部署应用程序时，首先运行yarn build。这似乎完成了它的工作，没有构建错误。然而，当我们实际部署它时，例如服务构建时，我们遇到了“referenceError：y未定义”的问题。

将Mapbox-gl版本降级至1.13.0后，构建就可以正常工作。在问题修复之前，这是我们必须要做的。

以下是步骤：

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

- Adif_Sgaid

0

针对这个问题的解决方案，适用于我而无需更改浏览器列表：

在Map.js组件中：

import { workerClass } from 'mapbox-gl';
import workerLoader from 'worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker';

workerClass = workerLoader;

in eslintrc:

"import/no-webpack-loader-syntax": "off",
"import/no-unresolved": "off"

- Morad Abed

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

0

将以下内容添加到package.json中对我有用：

"browserslist": {
    "production": [
        ">0.2%",
        "not dead",
        "not ie 11",
        "not chrome < 51",
        "not safari < 10",
        "not android < 51"
    ],
    "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
    ]
},

- Paul Fabbroni

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Charlie G · Accepted Answer

我知道这是一篇很旧的帖子。

据我所知，原因是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”。