Mapbox 画布渲染半屏

Question

我正在尝试将 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>
    );
}

问题是，结果如下：

它总是正好是宽度的 50%。我正在使用这个模块：https://github.com/alex3165/react-mapbox-gl

我搞砸了什么？

Answer 1

对不起，迟到的答案，这是由来 css conflcts 引起的。 尝试评论 .App 的文本对齐中心

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

这应该可行！