使用 React 缺少 MapBox CSS答案

【问题标题】：Missing MapBox CSS using React使用 React 缺少 MapBox CSS
【发布时间】：2018-11-27 07:09:02
【问题描述】：

我正在尝试使用 React 使用 MapBox。我已经使用 create-react-app 创建了项目，添加了 mapbox-gl ("mapbox-gl": "^0.46.0-beta.1")，但是我的 css 文件有问题。它向我显示了这个警告：

This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described inhttps://www.mapbox.com/mapbox-gl-js/api/

我已按照所有步骤操作：

1 - 安装 npm 包：npm install --save mapbox-gl

2 - 在您的 HTML 文件中包含 CSS 文件：<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />。

但是我是如何使用 ES6 反应的，我已经在 index.js css 文件中添加了import 'mapbox-gl/dist/mapbox-gl.css';

如果我导入 css 文件，它不会向我显示任何内容，如果我评论该导入，它会显示我没有设计的地图，它会向我显示警告。

怎么解决？？？感谢您的帮助

这是我的代码：

import React, { Component } from 'react';

import mapboxgl from 'mapbox-gl';

mapboxgl.accessToken = 'my_token';

class MapComponent extends Component {

  constructor(props) {
      super(props);
      this.state = {
        lng: 1.2217,
        lat: 39.8499,
        zoom: 6.48
      };

    }

  componentDidMount() {
      const { lng, lat, zoom } = this.state;

      var map = new mapboxgl.Map({
        container: 'map',
        center: [lng, lat],
        style: 'mapbox://styles/mapbox/streets-v10',
        zoom: zoom
      });

      map.on('move', () => {
        const { lng, lat } = map.getCenter();

        this.setState({
          lng: lng.toFixed(4),
          lat: lat.toFixed(4),
          zoom: map.getZoom().toFixed(2)
        });
      });
  }

  render() {
      const { lng, lat, zoom } = this.state;
      return (
        <div className="App">
            <div className="inline-block absolute top left mt12 ml12 bg-darken75 color-white z1 py6 px12 round-full txt-s txt-bold">
              <div>{`Longitude: ${lng} Latitude: ${lat} Zoom: ${zoom}`}</div>
            </div>
          <div id="map" />
        </div>
      );
  }
}

export default MapComponent;

解决方案：

正如我所说，我添加了 mapbox-gl.css，import 'mapbox-gl/dist/mapbox-gl.css';，但没有显示地图。

在 css 文件上显示下一个 css 属性：

<canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" width="951" height="844" style="position: absolute; width: 951px; height: 844px;"></canvas>

我已经通过这个修改了画布属性：

.mapboxgl-canvas {
    position: fixed !important;
    height: 100% !important;
}

已解决：

1 - import 'mapbox-gl/dist/mapbox-gl.css'; 2 - 覆盖名为 .mapboxgl-canvas 的 css 类

.mapboxgl-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

【问题讨论】：

控制台中是否显示任何错误？ javascript 或 CSS 的 404 等。
不，只显示警告，但如果评论或删除 css 导入不会显示任何内容。如果我查看 html，画布存在但不可见
网络标签呢？这是否显示正确下载了所需的 CSS？内容是你所期望的吗？地图 html 元素上是否有 visibility 或 display 设置阻止其显示？
我找到了解决办法
您可以添加您的解决方案作为答案吗？它使以后发现此问题的其他人更容易。

标签： reactjs mapbox mapbox-gl-js

【解决方案1】：

使用旧版本的 Mapbox 样式表as described here时也会显示警告：

像这样添加样式表并不能修复警告：

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />
并且像这样在 app.js 中导入也不起作用：
// app.js
import 'mapbox-gl/dist/mapbox-gl.css';
我发现用当前版本的模块解决这个问题的方法是添加更新的样式表：
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />

我遇到了同样的问题，这解决了它。

【讨论】：

【解决方案2】：

1 - 创建一个 randomName.css 文件

2 - 将此代码添加到您的 randomName.css 文件中

#yourMapDivName {
position:absolute; 
top:0; 
bottom:0; 
width:100%;
}

body { 
margin:0; 
padding:0;
}

3 - 将“./randomName.css”导入您的 index.js 文件

【讨论】：

【解决方案3】：

1 - 导入'mapbox-gl/dist/mapbox-gl.css'；

2 - 覆盖名为 .mapboxgl-canvas 的 css 类

.mapboxgl-canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

【讨论】：