Рендеринг холста Mapbox на половине экрана - PullRequest
Новая
       12

Рендеринг холста Mapbox на половине экрана

0 голосов
/ 18 февраля 2019

Я пытаюсь использовать MapBox с React.js.Это мой код: 

import ReactMapboxGl, {Layer, Feature} from "react-mapbox-gl";

render() {
    const Map = ReactMapboxGl({
        accessToken: "..."
    });
    return (
        <div className="App">
            <Map style="mapbox://styles/mapbox/streets-v9"
                 containerStyle={{
                     height: "100vh",
                     width: "100vw",
                 }}>
                <Layer
                    style={{
                        position: 'absolute',
                        left: 0,
                        top: 0,
                    }}
                    type="symbol"
                    id="marker"
                    layout={{"icon-image": "marker-15"}}>
                    <Feature coordinates={[-0.481747846041145, 51.3233379650232]}/>
                </Layer>
            </Map>
            {/*<button onClick={this.requestLocation}>Refresh position</button>*/}
        </div>
    );
}

Проблема в том, что это результат:

enter image description here

Это всегда точно 50%ширина.Я использую этот модуль: https://github.com/alex3165/react-mapbox-gl

Что я испортил?

1 Ответ

0 голосов
/ 28 апреля 2019

Извините за поздний ответ, это вызвано come css conflcts.Попробуйте прокомментировать центр выравнивания текста для .App 

.App {
   /* text-align: center; */
}

Это должно работать!

...