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或其他捆绑包捆绑你的应用程序时遇到了一些问题。

Answer 2

没有可见地图的症状有点像API访问令牌问题。

Readme.md描述了用于检查访问令牌的bash命令。

echo $MapboxAccessToken
npm start &
open "http://localhost:9966/?access_token=$MapboxAccessToken"

Github源使用mapboxApiAccessToken ，但测试样本使用r()显示的用法与您发布的略有不同。

  var map = r(MapGL, {
    width: 500,
    height: 500,
    longitude: -122,
    latitude: 37,
    zoom: 14,
    mapboxApiAccessToken: mapboxApiAccessToken
  });
  React.render(map, document.body);