<ReactMapGL/> 组件显示黑屏

Question

我正在关注 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;

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

遵循了这些解决方案：

Mapbox blank map React-map-gl | ReactJS

但组件仍然是空的。

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

编辑 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

Answer 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;

Answer 2

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

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

然而，我认为教程只是 react-map-gl

<ReactMapGL/> 组件显示黑屏

<ReactMapGL/> component shows blank screen

mapbox

reactjs

react-map-gl