1

我们都好吗？CSS菜鸟在这里。

我已经导入了 google-maps-react 并在我的项目中使用它。我正在尝试使用 CSS Grid 定义它使用的空间。但是在渲染时在 DOM 上会产生：

<div><-- Map Component--></div>

像这样，组件试图占用它的父 div 的空间，但不幸的是，外部 div 渲染为 0px 宽，但是下一个父级别的 div 是我的代码，并且给子元素一个很好的网格区域我想让他们填满。

  ...
    return (
    <Map
    google={google}
    initialCenter={location}
    zoom={14}
    containerStyle={props.containerStyle}>
    <Marker
        name={'Name'}
        onClick={onMarkerClick}>
    </Marker>
    </Map>
);
}
export default GoogleApiWrapper({
    apiKey: ('Key'),
  })(MapContainer)

我需要自动，因为它默认使用“100%”，它采用窗口大小。

<div style={{gridArea: '2 / 5 / 3 / 6'}}>
    <MapContainer containerStyle={{width: 'auto', height: 'auto'}} />
</div>

渲染的 HTML 和 CSS：

渲染的 HTML 和 CSS

理想情况下，我希望完全删除此 div，但 google-maps-react 源代码已被转译，因此在 jsx => 中不难阅读。这可能是因为当我从自定义组件导出时，我将它包装在 GoogleApiWrapper 包装器中（根据 google-maps-react 文档），但没有它它就无法工作。我尝试查看包装类，但看不到任何我可以用来提供帮助的东西。

我可以尝试编辑 div 内容，或者让有用的内容 div 访问父母的父母属性，但我不确定如何。google-maps-react Map 组件具有 style 和 containerStyle 属性，但是它们属于非问题子元素。如果我能提供帮助，我也不想计算代码中的大小并将其传递给 containerStyle（尽管这会起作用）。

任何想法将不胜感激！

格雷格

编辑：

好的，所以我设法通过编辑模块代码来删除 div。问题与div无关！

考虑关闭，但一旦解决可能仍会更新。

4

3 回答 3

1

凹凸，对于遇到此问题的人。问题仍然存在。我通过在我的样式中使用它来解决它：

mapArea:{
    height:'70vh', 
    width:'100%',
    "& div:first-child ":{
        height:'100%',
        width:'100%',
    }
},
于 2020-07-19T21:48:05.307 回答
1

我找到了解决方案。它是从 google-maps-react 组件中删除 div 外部 div，方法是进入 GoogleAPIComponent.js 文件并找到以下行：

return _react2.default.createElement(
    'div',
     null,
     _react2.default.createElement(WrappedComponent, props),
     _react2.default.createElement('div', { ref: 'map' }));

并将它们更改为：

return _react2.default.createElement(
    _react2.default.Fragment,
    null,
    _react2.default.createElement(WrappedComponent, props),
    _react2.default.createElement('div', { ref: 'map' }));

然后像这样调用地图组件：

<Map
    google={google}
    initialCenter={location}
    zoom={14}
    containerStyle={{ position: 'relative', width: '100%', height: '100%'}}>
    <Marker
        name={'Name'}
        onClick={onMarkerClick}>
    </Marker>
</Map>

我相信这是可行的，因为相对将组件保留在文档流中，因此 100% 与父 div 而不是屏幕（绝对发生）+ 空白 div 不再导致大小丢失给孩子！

可能会建议 PR

于 2019-06-30T21:21:13.480 回答
0

您的问题是子 div 是绝对位置，而父级具有自动宽度，自动宽度将调整为它的相对内容宽度。尝试设置 width: 100% 而不是 auto on

<div style={{gridArea: '2 / 5 / 3 / 6'}}>
    <MapContainer containerStyle={{width: '100%', height: 'auto'}} />
</div>

或弯曲 1

<div style={{gridArea: '2 / 5 / 3 / 6'}}>
    <MapContainer containerStyle={{flex: 1, height: 'auto'}} />
</div>
于 2019-06-27T22:14:41.113 回答