使用 React 渲染时出现 100% 高 Mapbox 地图的问题答案

【问题标题】：Issue with 100% high Mapbox map when rendering with React使用 React 渲染时出现 100% 高 Mapbox 地图的问题
【发布时间】：2019-01-23 17:27:37
【问题描述】：

我正在使用 Mapboxgl、Bootstrap 4 和 React 渲染地图。

我需要地图占据页面高度的 100% 并显示在两列网格的第一列中。

但是，当使用 React 时，地图的宽度会延伸到行宽的 100% - 在第二列下方重叠。

最好的办法是查看我在 jsfidle 上的示例以理解我的意思。

地图正确显示（使用纯 HTML 且没有 React 时） https://jsfiddle.net/apphancer/jhxy5c63/

显示宽度的地图问题（使用 React 时） https://jsfiddle.net/apphancer/9g71ovn6/

为了让 100% 的高度正常工作，我使用了这个 CSS：

.map-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
}

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

我怀疑这可能与使用 React 渲染地图的方式有关，因为使用纯 HTML 解决方案时不会发生此问题。

有人能指出正确的方向吗？

HTML

<div id="app"></div>

CSS

body, html {
    height: 100%;
}

#app, .row, .col-9 {
    height: 100%;
}

.col-3 {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid red;
}

.map-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
}

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

mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA';

class Application extends React.Component {
    componentDidMount() {
        const map = new mapboxgl.Map({
            container: 'map', // container id
            style: 'mapbox://styles/mapbox/light-v9', // stylesheet location
            center: [13.392, 52.523], // starting position [lng, lat]
            zoom: 9 // starting zoom
        });
        map.addControl(new mapboxgl.NavigationControl());
        map.resize(); // tried with this to see if it would help
    }

    render() {
        return (
            <div className="row no-gutters">
                <div className="col-9">
                    <div className="map-wrapper">
                        <div ref={el => this.mapContainer = el} id="map"/>
                    </div>
                </div>
                <div className="col-3">
                    2 of 2
                </div>
            </div>
        )
    }
}

ReactDOM.render(<Application/>, document.getElementById('app'));

【问题讨论】：

标签： css reactjs bootstrap-4 mapbox mapbox-gl-js

【解决方案1】：

如果您在包装器中使用固定为 100% 宽度的位置，它将覆盖所有宽度。但是如果你将位置设置为相对，它将只覆盖剩余的宽度。

.map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

这在您的 react-jsfiddle 中有效。请尝试。

【讨论】：

【解决方案2】：

如果您在项目中使用位置 fixed，您可以覆盖整个区域，这样您就有 2 个解决方案

第一种解决方案

将75% 的宽度赋予#map，使其行为类似于col-9，无需提供position: absolute;

#map {
    width: 75%;
    height: 100%;
}

第二个解决方案

给它相对于你元素的父元素的位置，这样它就不能离开它的区域，为此你可以将position: fixed 更改为position: relative

.map-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

这两种解决方案都是很好的解决方案，但我更喜欢第二个解决方案，就我而言。

【讨论】：

【解决方案3】：

const [viewport, setViewport] = useState({ 宽度：'100%'， height: 'calc(100vh - 162px)', // 162px 是地图顶部所有元素的大小高度纬度：0，经度：0，缩放：12，轴承：0，间距：0，过渡持续时间：2000， transitionInterpolator: new FlyToInterpolator(), });

【讨论】：