css - react 图 GL : map not taking the entire width

Question

我正在使用语义 react ui 作为 ui 库并使用 react map gl 在我的 react 应用程序中渲染 map 。但是从 react-map-gl 渲染的 map 并没有占据列的整个宽度。请找到下面的图片:


虚线代表列。 map 仍有足够的宽度可以拉伸(stretch)。但是根据文档，我们必须以像素为单位提供 map 的宽度和高度。

容器代码如下:

    render() {
    return (
        <Grid style={{ padding: '20px' }}>
            <Grid.Row>
                <Grid.Column mobile={16} computer={12} style={{ border: 'dotted', paddingLeft: 0 }}>
                    <PincodesMap
                        viewPort={this.props.viewPort}
                        handleViewportChange={this.handleViewportChange.bind(this)}
                    />
                </Grid.Column>
                <Grid.Column mobile={16} computer={4} style={{ border: 1 }}>
                    This is test
                </Grid.Column>
            </Grid.Row>
        </Grid>
    );
}

而保存 map 的组件如下所示:

import React from 'react';
import ReactMapGL from 'react-map-gl';

const PincodesMap = ({ viewPort, handleViewportChange }) => (
    <ReactMapGL
        {...viewPort}
        mapStyle="mapbox://styles/mapbox/dark-v9"
        mapboxApiAccessToken="key"
        onViewportChange={handleViewportChange}
    />
);

export default PincodesMap;

map 的视口(viewport)代码如下:

viewPort: {
        width: 800,
        height: 800,
        latitude: 21.1458,
        longitude: 79.0882,
        zoom: 4
    }

我们不能以百分比提供宽度。我们如何让它看起来全宽？另外，如何在手机上自动调整 map 大小？

谢谢

Answer 1

这对我有用:

viewport: {
  width: "fit",
  ...
},

<ReactMapGL
  onViewportChange={nextViewport =>
    this.setState({ viewport: { ...nextViewport, width: "fit" } })
  }
...
>