如何解决如何使用 React Js 修复 Google 地图中的下拉菜单位置?
我一直在尝试修复我的 google-map 上下拉菜单的位置,它位于全屏按钮旁边的右上角。 This what I currently have.
如果我使用自己的笔记本电脑查看地图,上图看起来不错。但是,如果我要放大或缩小,或更改使用桌面查看地图,下拉菜单要么在全屏按钮后面,要么远离它。
This is when I zoomed-in to Google map.
This is when I zoomed-out Google map or using a desktop to view it.
我目前正在使用内联样式,而不是使用 CSS 或 SCSS。这是我用于以下操作的代码:
Map.js
render() {
var left = 80 + 'px';
var bottom = 337 + 'px';
return (
<div className="animated fadeIn">
<div class="demo-solution demo-solution--flexbox">
<img src={image} />
<span>Normal</span>
<img src={image2} />
<span>Error</span>
<img src={image3} />
<span>Maintenance</span>
</div>
<Row>
<Col xs="12" md="12">
<div style={{ height: '700px' }}>
<GoogleMapReact
options={createMapOptions}
bootstrapURLKeys={{ key: this.state.API_KEY }}
center={this.state.center}
zoom={this.state.zoom}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map,maps }) => this.handleApiLoaded(map,maps,this.state.sensor_data)}>
<div style={{ bottom,left,position: 'relative' }} >
<Col xs="1" md="4">
<Input
type="select"
name="select_location"
value={this.state.select_location}
onChange={this.handleInputLocation}>
{this.createLocationItems()}
</Input>
</Col>
</div>
</GoogleMapReact>
</div>
</Col>
</Row>
</div>
)
}
}
我尝试将位置从相对位置更改为绝对位置,但没有任何变化。我也尝试过使用边距或填充,但它没有帮助实现我想要的。请提前帮助并感谢您!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。