关于css：React Map GL：地图未占用整个宽度


React Map GL: map not taking the entire width

我将语义React ui用作ui库，并在我的react应用程序中使用react map gl来渲染地图。 但是从react-map-gl渲染的地图不会占用列的整个宽度。 请找到下面的图片：
enter image description here

虚线表示该列。 仍然有足够的宽度可以拉伸地图。 但是根据文档，我们必须以像素为单位提供地图的宽度和高度。

容器代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    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>
    );
}

拥有地图的组件如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
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;

地图的视口代码如下：

1
2
3
4
5
6
7
viewPort: {
        width: 800,
        height: 800,
        latitude: 21.1458,
        longitude: 79.0882,
        zoom: 4
    }

我们无法以百分比形式提供宽度。 我们如何使其显示为全角？ 另外，如何在手机上自动调整地图大小？

谢谢

相关讨论

使用react-map-gl版本5.2.3，当我使用width: '100%', height: '100%'时，地图将不会渲染。

代替百分比单位，我可以使用" vw" /" vh"单位来使它正常工作：width: '100vw', height: '100vh'。 这是react-map-gl存储库的docs示例中当前显示的语法样式。

repo示例直接使用width / height道具，但是在viewPort对象中，它看起来像：

1
2
3
4
5
6
7
viewPort: {
  width: '100vw',
  height: '100vh',
  latitude: 21.1458,
  longitude: 79.0882,
  zoom: 4
}

希望能对某人有所帮助。

这为我工作：

1
2
3
4
viewport: {
  width:"fit",
  ...
},
1
2
3
4
5
6
<ReactMapGL
  onViewportChange={nextViewport =>
    this.setState({ viewport: { ...nextViewport, width:"fit" } })
  }
...
>

对我来说，对于[email protected]，我无法将宽度和高度指定为100%。 尽管指定100vh可行，但在移动设备上却有问题。

我通过指定viewPort来解决此问题，如下所示

1
2
3
4
5
6
7
  viewport: {
    latitude: 0,
    longitude: 0,
    zoom: 1,
    height: window.innerHeight,
    width: window.innerWidth,
  }

您应该能够以百分比形式提供宽度。 只要确保它是一个字符串即可。

1
2
3
4
5
6
7
viewPort: {
    width:"100%",
    height:"100%",
    latitude: 21.1458,
    longitude: 79.0882,
    zoom: 4
}