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

根据您在 cmets 中的要求，我提供了一个简单的演练来测试您的代码。

我选择了一个随机反应样板来节省一些时间。我克隆它并安装它的所有依赖项。

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 source 使用 mapboxApiAccessToken，但 test sample 显示的用法与您发布的内容略有不同，使用 r()。

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