我一直在尝试将下拉
菜单放置在我的谷歌地图的特定位置,具体来说是在右上角(或者左上角也可以)。
以下是我当前得到的:
以下是预期结果:
编辑
尝试 margin-top: 100px;
后,combobx 将向下移动,但如果我输入 margin-bottom: 500px;
下拉列表仍位于中心(其中起源是)。
同样,如果我输入 margin-left: 500px
下拉菜单将向右移动,但如果我输入 margin-right: 500px
下拉菜单将不会移动得比起源。
似乎唯一允许的移动是向下和向左,但不允许向上和向右。
下面是屏幕截图:
我使用的代码如下:
GoogleMap.js
import React from 'react';
import styled from 'styled-components';
import GoogleMapReact from 'google-map-react';
import { Card, CardImg, CardText, CardBody, CardTitle, /*CardSubtitle,*/ Button } from 'reactstrap';
import ShipTracker from '../components/ShipTracker';
const MapContainer = styled.div`
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 200px;
grid-gap: 10px;
height: 100vh;
grid-template-areas: "google-map sidebar" "ship-tracker sidebar";
.google-map {
background: #424242;
grid-area: google-map;
position: relative;
height: 100%;
width: 100%;
}
.map-sidebar {
background: #9dc183;
grid-area: sidebar;
}
.ship-tracker {
grid-area: ship-tracker;
}
`;
var expanded = false;
function showCheckboxes() {
// show checkboxes
}
const BoatMap = () => (
<div className="google-map">
<GoogleMapReact
bootstrapURLKeys={{ key: 'My_KEY' }}
center={{
lat: 42.4,
lng: -71.1
}}
zoom={11}
>
{/* Insert components here */}
<form>
<div class="multiselect">
<div class="combo-companies" onClick={showCheckboxes}>
<select>
<option>Select an option</option>
</select>
<div class="overSelect" />
</div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="CD" />Marker-1
</label>
<label for="two">
<input type="checkbox" id="DJ" />Marker-2
</label>
<label for="three">
<input type="checkbox" id="DT" />Marker-3
</label>
</div>
</div>
</form>
</GoogleMapReact>
</div>
);
GoogleMap.css
.combo-companies {
position: absolute;
height: 34px;
width: 10%;
font-size: 16px;
border: 1px solid #111;
border-radius: 3px;
left: 15px;
top: 15px;
z-index: 2000;
}
.multiselect {
width: 200px;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkboxes {
display: none;
border: 1px #dadada solid;
}
到目前为止我所做的事情:
1) 我用了 CSS Grid Layout确定谷歌地图应该在哪里。之后,再次查看文档,我确定了网格的位置。所以here和 here应该不错。
2)我认为主要问题可以通过在组件上使用relative
和absolute
参数来确定,正如我在this one等帖子上读到的和 this 。
虽然有用,但我无法找出问题所在。
3)我知道我已经接近解决方案了,因为唯一剩下的就是渲染并遇到 this useful post并认为这可能是我的解决方案,但事实并非如此。
感谢您为解决此问题指明了正确的方向。
最佳答案
在 GoogleMap.css 中尝试一下
.multiselect{
width: 200px;
position: absolute; /*Also try relative if this doesn't work */
margin: 2vh 50vw auto auto;
}
关于javascript - react - JavaScript : How to properly position a dropdown menu on top of a Google Map,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59936185/