reactjs - 反应地图 google outsie 网格
问题描述
我在我的项目中使用google-maps-react 。在我页面的一侧,我想放地图。分离我正在使用的内容Grid
,我的网站看起来像这样
render() {
return (
<Grid container spacing={8}>
<Grid item sm={7}>Some content here</Grid>
<Grid item sm={5}>
<Grid container spacing={8}>
<Grid item sm={12}> <MAPCONTAINER /> </Grid>
<Grid item sm={12}> <OTHER_COMPONENT /> </Grid>
</Grid>
</Grid>
</Grid>
)}
<MAPCONTAINER />
看起来像这样
const style = {
width: '100vw',
weight: '100hx',
}
class MapContainer extends Component {
render() {
return (
<Map
google={this.props.google}
zoom={4}
style = {style}
>
</Map>
);
}
}
export default GoogleApiWrapper({
apiKey: (GOOGLE_KEY)
})(MapContainer)
有两个问题:一个是地图超出了 Grid ,它很宽,奇怪的是当我检查这个 Grid 元素时,它显示它有height:0
,就像那个 Grid 里面没有任何东西一样。第二个问题是<OTHER_COMPONENT />
地图上的重叠,就像它看不到上面还有其他一些组件一样。
我找不到将地图放入网格的方法,它应该如何正确。
谢谢你的帮助。
解决方案
Map 组件在其中渲染地图,<div style="position: absolute;...
因此您需要将其包装在<div style="position: relative;
最简单的方法是添加 position: relative; 像这样到 Grid 项目:
<Grid item sm={12} style={{position: 'relative', height: '50vh'}}><MapContainer /></Grid>
这样您就不需要向 Map 组件添加样式
<Map
google={this.props.google}
zoom={4}>
</Map>
推荐阅读
- html - 试图在模态中传递 id 但它破坏了模态
- c - 如何按词法顺序读取目录中的文件?
- javascript - 在 THREE.js 的自定义着色器中将图像作为纹理映射到平面
- tensorflow-federated - 如何在 tensorflow 联合中获取客户端模型(基于 Keras)?
- api - 从 R Shinny App 进行 API 调用时出现 SSL 读取错误
- vue.js -
使用 bootstrap-vue 时显示为文本 - flutter - 使用 SimpleDialog 时状态被破坏
- php - Wordpress get_terms 不允许数组变量
- c++ - 结构的动态数组 C++
- java - build.gradle 错误。抱歉不能把错误放在这里看正文