缺失MapBox CSS在React中的使用

Question

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

此页面似乎缺少Mapbox GL JS的CSS声明，这可能导致地图显示不正确。请确保您的页面包括mapbox-gl.css，如https://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' />。

但是由于我正在使用React和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>

我通过以下方式修改了canvas属性:

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

- Javier

---

控制台中是否显示任何错误？无论是JavaScript还是CSS的404等。 - Colin Young

我找到了一个解决方案 - Javier

我在问题的末尾添加了解决方案。可以吗？ - Javier

最好将其作为答案，因为这样问题会显示为已有答案。自己回答问题也是可以的。 - Colin Young

请勿将解决方案公告编辑到问题中。如果已有答案，请接受其中一个（即单击其旁边的“打勾”）。如果您的解决方案尚未被现有答案覆盖，您也可以创建自己的答案，并接受它。请参阅https://stackoverflow.com/help/self-answer进行比较。 - Yunnosch

Answer 1

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%;
}

- Javier

Answer 2

使用旧版的Mapbox样式表时，也会显示此警告信息，详见此处。

Adding the stylesheet like this doesn't fix the warning:

<!-- index.html -->
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.42.0/mapbox-gl.css' rel='stylesheet' />

And importing in the app.js like this doesn't work either:

// app.js
import 'mapbox-gl/dist/mapbox-gl.css';

The way I found that fix this problem with the current version of the module is add the updated stylesheet:

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />

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

- Wayne

---

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' /> 这段代码也解决了我的问题。谢谢！ - JackWilson

Answer 3

1 - 创建一个 randomName.css 文件

2 - 将以下代码添加到你的 randomName.css 文件中

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

body { 
margin:0; 
padding:0;
}

第三步 - 在你的index.js文件中导入'./randomName.css'

- Szelek

Answer 4

1. 在你的index.scss文件中导入Mapbox样式表：

   import 'mapbox-gl/dist/mapbox-gl.css';

2. 将index.scss文件导入到你的app.js中：

   import './styles/index.scss';

3. 将你的地图div放在一个div包装器中，并给它一个CSS规则。默认情况下，Mapbox会为地图div设置100%的宽度和高度：

   <div class="myMapWrapper"><div id="map" class="mapboxgl-map" style="position: relative; width: 100%; height: 100%;"></div></div>`
   

这样，您就可以在CSS中根据需要进行调整。例如，全屏模式：

 .myMapWrapper {
    height: 100vh;
    width: 100vw;
}

- Luca Incerti