如何使用 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 (将#修改为@）