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

react-map-gl：不显示地图

2 个答案: