<ReactMapGL/> 组件显示黑屏答案

【问题标题】：<ReactMapGL/> component shows blank screen<ReactMapGL/> 组件显示黑屏
【发布时间】：2021-12-31 19:51:15
【问题描述】：

我正在关注 lama dev youtube 频道关于在 reactjs 中使用 mapbox 的视频。但是当我运行 reactjs 脚本时，我的地图组件是空的。

源代码： https://github.com/safak/youtube/tree/mern-travel-app

我的代码

import * as React from 'react';
import { useState } from 'react';
import ReactMapGL from 'react-map-gl';

function App() {

  const [viewport, setViewport] = useState({
    width: "100vw",
    height: "100vh",
    latitude: 46,
    longitude: 17,
    zoom: 8,
  });


  return (
    <div className="App">
      <ReactMapGL
      {...viewport} 
      mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX} 
      onViewportChange={nextViewport => setViewport(nextViewport)} 
    />
    </div>
  );
}

export default App;

我遵循了编码，在 react 部分，我创建了 .env 文件，安装并导入了 react-map-gl 并使用了 .出于某种原因，我只看到空白屏幕而不是地图。我尝试了 uber 库 visgl.github.io 中的示例代码，以及您提供的源代码，但屏幕仍然是空白的。

遵循这些解决方案：

Mapbox blank map React-map-gl | ReactJS react-map-gl: Map Does Not Appear Map not showing up when using react-map-gl and create-react-app

但组件仍然是空的。

任何帮助都会很有用，谢谢！

编辑 1：我在firefox控制台中发现了这个错误：

An error occurred while parsing the WebWorker bundle. This is most likely due to improper transpilation by Babel; please see https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling

【问题讨论】：

你能试试这里提到的解决方案吗？ stackoverflow.com/questions/65434964/…

标签： reactjs mapbox react-map-gl

【解决方案1】：

在 J-007 的评论之后，我在前面的导入行下面添加了这些行：

import mapboxgl from 'mapbox-gl'; 


mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;

现在地图工作正常。

编辑：这仅在一个项目中有效- https://codesandbox.io/s/react-test-ivbkv?file=/src/App.js 那么它在提供的示例中不起作用 http://visgl.github.io/react-map-gl/docs/get-started/get-started

然后我发现—— https://medium.com/geekculture/building-an-interactive-map-with-mapbox-react-f335384f4863:

并完全按照本文中提到的方式使用 npx create-react-app 项目名称，我发现即使在 http://visgl.github.io/react-map-gl/docs/get-started/get-started 脚本中也可以使用地图。

编辑 2：复制 Medium 文章中的粘贴代码（以防万一）-

npx create-react-app mapbox-project
cd mapbox-project
npm i react-map-gl react-map-gl-geocoder
npm start

import React, { Component } from 'react';
import ReactMapGl from 'react-map-gl'
import 'mapbox-gl/dist/mapbox-gl.css';

const mapboxToken = 'YOUR API KEY'

class Map extends Component {
  constructor() {
    super()
    this.state = {
      viewport: {
        width: '100vw',
        height: '100vh',
        latitude: 40.78343,
        longitude: -73.96625,
        zoom: 11
      }
    }
    this.handleViewportChange = this.handleViewportChange.bind(this)
  }
  handleViewportChange(viewport) {
    this.setState(prevState => ({
      viewport: {...prevState.viewport, ...viewport}
    }))
  }
  render() {
    return (
      <ReactMapGl
        {...this.state.viewport}
        onViewportChange={viewport => this.setState({viewport})}
        mapboxApiAccessToken={mapboxToken}
        mapStyle="mapbox://styles/mapbox/streets-v10"
      />
    )
  }
}

export default Map;

【讨论】：

【解决方案2】：

对我有用的是这个页面： http://visgl.github.io/react-map-gl/docs/get-started/get-started

npm install --save react-map-gl mapbox-gl

然而，我相信本教程只是 react-map-gl

【讨论】：