使用React丢失MapBox CSS [英] Missing MapBox CSS using React

问题描述

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

I'm trying to work with MapBox using React. I've created the project with create-react-app, added mapbox-gl ("mapbox-gl": "^0.46.0-beta.1"), but I have a problem with css file. It shows me this warning:

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 in https://www.mapbox.com/mapbox-gl -js/api/

我已遵循所有步骤:

1-安装npm软件包:npm install --save mapbox-gl

1 - Install the npm package: npm install --save mapbox-gl

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

2 - Include the CSS file in the of your HTML file: <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';

But how I'm using react with ES6, I've added in index.js css file import 'mapbox-gl/dist/mapbox-gl.css';

如果我导入css文件，它什么都不会显示，并且如果我评论该导入，它会显示地图，而无需设计，并且会显示警告.

If I import css file, it doesnt show me anything, and If I comment that import it shows me map without desing and it shows me the warning.

我该如何解决???谢谢您的帮助

How can I solve it??? Thanks for your help

这是我的代码:

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';，但未显示地图.

As I said, I added mapbox-gl.css, import 'mapbox-gl/dist/mapbox-gl.css'; but doesnt show the map.

在CSS文件上，显示下一个CSS属性:

On css file shows next css attributes:

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

我已经通过以下方式修改了画布属性:

I've modified canvas properties by this:

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

已解决:

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

1 - import 'mapbox-gl/dist/mapbox-gl.css'; 2 - override css class called .mapboxgl-canvas

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

推荐答案

1-创建一个randomName.css文件

1 - Create a randomName.css file

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

2 - Add this code to your randomName.css file

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

body { 
margin:0; 
padding:0;
}

3-将"./randomName.css"导入到index.js文件中

3 - import './randomName.css', to your index.js file

这篇关于使用React丢失MapBox CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！