如何在 react-google-maps reactjs 中更改 infoWindow 样式
how to change infoWindow Style in react-google-maps reactjs
我想更改信息窗口的样式:
创建一个 CSS 文件来更改 .gm-style .gm-style-iw-d
和 .gm-style .gm-style-iw-c
proprty 但没有什么可改变的,我想更改或禁用 [=14=] ,over-flow:scroll
,padding-right
,...喜欢这张照片:
我读了这个 link: InfoWindowOptions 并写下这一行以进行更改 maxWidth
:
<InfoWindow options={{maxWidth:300}} onCloseClick={() => togelOpenCloseInfoWindos}>
但没有什么可以改变的。
这是我的代码:
{isOpen &&
<InfoWindow options={{ maxWidth: 300 }} style={{ backgroundColor: 'red' }} onCloseClick={() => togelOpenCloseInfoWindos}>
<Grid container style={{ paddingLeft: 8, paddingRight: 8, }} xs={12} spacing={0} >
<Grid item xs={7} sm={8} zeroMinWidth>
<Typography noWrap component="p">
<Box fontWeight="bold">
{props.MyProps.locations.NICKNAME}</Box>
</Typography>
{/* <p className={classes.card_title}>{car.NICKNAME}</p> */}
</Grid>
<Grid item xs={5}>{speed_logo(props.MyProps.locations)}</Grid>
<Grid item xs={7} style={{ marginTop: -9 }}><p className={classes.card_time}>{timeToShow(props.MyProps.locations.SENTDATE)}</p></Grid>
<Grid item xs={5} style={{ marginTop: -9 }}>{tempture_logo(props.MyProps.locations)}</Grid>
<Grid xs={12}><Typography component='p' className={classes.card_Address}>{props.MyProps.locations.POSDESCRIPTION}</Typography></Grid> </Grid>
</InfoWindow>
}
请帮我更改信息窗口的样式
我不确定如何通过 CSS 文件中的 element.style{}
更改您的信息窗口,但是当我将它放在 .gm-style .gm-style-iw-c {}
中时,我成功地覆盖了这些值 CSS 文件并在每一行附加 !important
,如下所示 code:
.gm-style .gm-style-iw-c {
padding-right: 10px !important;
padding-bottom: 0px !important;
max-width: 500px !important;
max-height: 326px !important;
min-width: 0px !important;
position: absolute;
box-sizing: border-box;
overflow: hidden;
top: 0;
left: 0;
transform: translate(-50%,-100%);
background-color: #dd9191;
border-radius: 8px;
box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3);
}
注意:这可能是您要查找的内容,但是 class 名称将来可能会被 Google Maps Platform 更改。
至于 InfoWindow 中的 maxWidth 选项,我尝试在我的 reactjs 代码中使用它,而不是在我的 CSS 文件中覆盖它,并且它工作正常。这是我的 code:
中的样子
<InfoWindow onCloseClick={this.props.handleCloseCall} options= {{maxWidth : 100 }}>
<span>This is InfoWindow message!</span>
</InfoWindow>
注意:您需要在所提供的代码的 index.js 中使用您自己的 API 键更改 YOUR_API_KEY_HERE
字符串才能正常工作。
希望对您有所帮助!
我想更改信息窗口的样式:
创建一个 CSS 文件来更改 .gm-style .gm-style-iw-d
和 .gm-style .gm-style-iw-c
proprty 但没有什么可改变的,我想更改或禁用 [=14=] ,over-flow:scroll
,padding-right
,...喜欢这张照片:maxWidth
:
<InfoWindow options={{maxWidth:300}} onCloseClick={() => togelOpenCloseInfoWindos}>
但没有什么可以改变的。
这是我的代码:
{isOpen &&
<InfoWindow options={{ maxWidth: 300 }} style={{ backgroundColor: 'red' }} onCloseClick={() => togelOpenCloseInfoWindos}>
<Grid container style={{ paddingLeft: 8, paddingRight: 8, }} xs={12} spacing={0} >
<Grid item xs={7} sm={8} zeroMinWidth>
<Typography noWrap component="p">
<Box fontWeight="bold">
{props.MyProps.locations.NICKNAME}</Box>
</Typography>
{/* <p className={classes.card_title}>{car.NICKNAME}</p> */}
</Grid>
<Grid item xs={5}>{speed_logo(props.MyProps.locations)}</Grid>
<Grid item xs={7} style={{ marginTop: -9 }}><p className={classes.card_time}>{timeToShow(props.MyProps.locations.SENTDATE)}</p></Grid>
<Grid item xs={5} style={{ marginTop: -9 }}>{tempture_logo(props.MyProps.locations)}</Grid>
<Grid xs={12}><Typography component='p' className={classes.card_Address}>{props.MyProps.locations.POSDESCRIPTION}</Typography></Grid> </Grid>
</InfoWindow>
}
请帮我更改信息窗口的样式
我不确定如何通过 CSS 文件中的 element.style{}
更改您的信息窗口,但是当我将它放在 .gm-style .gm-style-iw-c {}
中时,我成功地覆盖了这些值 CSS 文件并在每一行附加 !important
,如下所示 code:
.gm-style .gm-style-iw-c {
padding-right: 10px !important;
padding-bottom: 0px !important;
max-width: 500px !important;
max-height: 326px !important;
min-width: 0px !important;
position: absolute;
box-sizing: border-box;
overflow: hidden;
top: 0;
left: 0;
transform: translate(-50%,-100%);
background-color: #dd9191;
border-radius: 8px;
box-shadow: 0 2px 7px 1px rgba(0,0,0,0.3);
}
注意:这可能是您要查找的内容,但是 class 名称将来可能会被 Google Maps Platform 更改。
至于 InfoWindow 中的 maxWidth 选项,我尝试在我的 reactjs 代码中使用它,而不是在我的 CSS 文件中覆盖它,并且它工作正常。这是我的 code:
中的样子<InfoWindow onCloseClick={this.props.handleCloseCall} options= {{maxWidth : 100 }}>
<span>This is InfoWindow message!</span>
</InfoWindow>
注意:您需要在所提供的代码的 index.js 中使用您自己的 API 键更改 YOUR_API_KEY_HERE
字符串才能正常工作。
希望对您有所帮助!