react-map-gl:不显示地图

Question

我正在使用优步的react-map-gl软件包,但即使在尝试了几天之后,也无法让它运行起来.

我不是想做任何想象的事情 - 但是现在,我只想在我的页面上显示一张地图.我想,一旦我开始工作,我可以尝试更高级的东西.

不幸的是,这就是我所看到的:

有什么建议？

这是我的代码的相关部分(来自.jsx文件):

import React from 'react'
import { connect } from 'react-redux'
import MapGL from 'react-map-gl'

const App = React.createClass({

  render: function () {
    const map = (
        <div>
          <MapGL
            width={700}
            height={450}
            latitude={37.78}
            longitude={-122.45}
            zoom={11}
            mapStyle={'mapbox://styles/mapbox/basic-v9'}
            mapboxApiAccessToken={'pk.ey...<removed for privacy>...'}
          />
        </div>
      )

    return (
      <div>
        =======Map should be below=======
        <br/>
        { map }
        <br/>
        =======Map should be above=======
      </div>
    )
  }
})

export default connect()(App)

我网站上的其他所有内容都有效; 唯一缺少的是地图实际上并没有出现.提前感谢您提供的任何帮助.

Answer 1

根据您在评论中的要求,我提供了一个简单的演练来测试您的代码.

我选择了随机反应样板以节省一些时间.我克隆它并安装其所有依赖项.

git clone https://github.com/coryhouse/react-slingshot
cd react-slingshot
npm install

然后,我安装react-map-gl.

npm install react-map-gl --save

我们现在需要安装react-map-gl所需的一些依赖项才能正常工作.

npm install json-loader transform-loader webworkify-webpack@1.0.6 --save-dev

这里唯一具体的是webworkify-webpack的v1.0.6,据我所知,这是与react-map-gl开箱即用的最新版本.

接下来,我们需要在webpack.config.dev.js文件中向Webpack添加适当的配置指令.

首先,我们添加一个resolve块

resolve: {
  extensions: ['', '.js', '.jsx'],
  alias: {
    webworkify: 'webworkify-webpack',
  }
},

我们只需将现有的加载器添加到现有的加载器中.

/** ... Previous loaders ... **/
{test: /\.json$/, loader: 'json-loader'},
{test: /\.js$/, include: path.resolve(__dirname, 'node_modules/webworkify/index.js'), loader: 'worker'},
{test: /mapbox-gl.+\.js$/, loader: 'transform/cacheable?brfs'},

最后一步是简单地将代码放在一个组件中以显示它(src/components/HomePage.js).

import MapGL from 'react-map-gl';

/** ... **/

return (
  <div>
    <MapGL
      width={700}
      height={450}
      latitude={37.78}
      longitude={-122.45}
      zoom={11}
      mapboxApiAccessToken={'pk.eyJ1IjoiMW0yMno1Nmw3N2sifQ.YNkaLBJBc4lNXa5A'}
      mapStyle={'mapbox://styles/mapbox/basic-v9'}
    />
  </div>
);

为了测试应用程序,我们使用

npm start

将打开一个浏览器,其中包含以下内容.这是您提供的JSX代码,唯一的修改是我的Mapbox API访问令牌.

我的猜测是,你在使用Webpack或其他捆绑包捆绑你的应用程序时遇到了一些问题.