Проблема с картой Mapbox высотой 100% при рендеринге с помощью React - PullRequest
Новая
       40

Проблема с картой Mapbox высотой 100% при рендеринге с помощью React

0 голосов
/ 23 января 2019

Я рендерил карту, используя Mapboxgl, Bootstrap 4 и React.

Мне нужно, чтобы карта занимала 100% высоты страницы и отображалась в первом столбце сетки из двух столбцов.

Однако при использовании React ширина карты увеличивается до 100% ширины строки, перекрывая нижнюю часть 2-го столбца.

Лучше всего было бы проверить мои примеры на 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%;
}

JS 

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

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Если вы используете позицию fixed в своем проекте, вы можете покрыть всю область, так что у вас есть 2 решения

1-й раствор

присвойте 75% ширину #map, так что она будет вести себя как col-9 и не нужно давать position: absolute;

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

2-й раствор

присвойте ему относительную позицию по отношению к родителю вашего элемента, чтобы он не мог покинуть его область, для этого вы можете изменить position: fixed на position: relative 

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

оба решения - хорошее решение, но я предпочитаю 2-е решение , с моей стороны.

0 голосов
/ 23 января 2019

Если вы используете положение с фиксированной шириной 100% в оболочке, оно будет охватывать всю ширину. Но если вы установите относительное положение, оно охватит только оставшуюся ширину. 

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

Это сработало в вашей реакции-jsfiddle. Пожалуйста, попробуйте.

...