React Map GL：地图不占用整个宽度答案

【问题标题】：React Map GL: map not taking the entire widthReact Map GL：地图不占用整个宽度
【发布时间】：2019-01-06 09:37:18
【问题描述】：

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

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

容器代码如下：

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

而保存地图的组件如下所示：

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;

地图的视口代码如下：

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

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

谢谢

【问题讨论】：

你能创建一个显示代码的 plunkr 吗？看看这个embed.plnkr.co/LJ7K5csN5paJaiUgLlB8
您可以在视口中提供width:'100%'。
感谢@MurliPrajapati，它成功了。

标签： css reactjs responsive react-map-gl

【解决方案1】：

这对我有用：

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

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

【讨论】：

【解决方案2】：

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

我能够使用“vw”/“vh”单位而不是百分比单位来使其工作，如下所示：width: '100vw', height: '100vh'。这是docs examples from the react-map-gl repo 中当前显示的语法样式。

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

viewPort: {
  width: '100vw',
  height: '100vh',
  latitude: 21.1458,
  longitude: 79.0882,
  zoom: 4
}

希望对某人有所帮助。

【讨论】：

设置 100vw 的问题在于，这将包括垂直滚动条的宽度，使使用具有占用空间的滚动条的浏览器的每个人都可以看到水平滚动条。（所以基本上任何非移动设备或 macOS 的东西）这不能通过设置更小的宽度以干净的方式解决，因为滚动条宽度在平台之间仍然不同。

【解决方案3】：

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

viewPort: {
    width: "100%",
    height: "100%",
    latitude: 21.1458,
    longitude: 79.0882,
    zoom: 4
}

【讨论】：

【解决方案4】：

对于我来说，使用react-map-gl@5.2.3，我无法为100% 指定宽度和高度。虽然指定100vh 有效，但它在移动设备上存在问题。

我通过指定viewport 解决了这个问题，如下所示

  viewport: {
    latitude: 0,
    longitude: 0,
    zoom: 1,
    height: window.innerHeight,
    width: window.innerWidth,
  }

【讨论】：

【解决方案5】：

尝试在props中添加width="100vw"height="100vh"。

<ReactMapGL
        {...viewPort}
        width="100vw"
        height="100vh"
        mapStyle="mapbox://styles/mapbox/dark-v9"
        mapboxApiAccessToken="key"
        onViewportChange={handleViewportChange}
    />

【讨论】：