向传单地图添加可点击按钮
mat*_*ato 4 html javascript css leaflet
我想在我的传单地图的右上角（距顶部 20 像素，距右侧 20 像素）添加一个按钮。问题是我不确定如何正确执行此操作。问题是当我使用那个传单类“leaflet-top Leaflet-right”时，我的按钮不可点击，当我将鼠标悬停在它上面时，没有任何反应。它只是作为地图的一部分。
这是我的 html 代码：
<div id="mainContainer">
<div id="mapDiv">
<div id="map">
<div class="leaflet-top leaflet-right">
<div id="refreshButton"><div id="refreshButtonPictogram"><img src="pictograms/refresh.png" height="30px"></div></div>
</div>>
</div>
</div>
<div id="bars"></div>
</div>
这是我的CSS：
#mainContainer{
position: relative;
width: 100%;
height: calc(100% - 80px);
display: flex;
}
#bars{
z-index: 0;
width: 500px;
overflow-x: auto;
border-left: 1px solid rgb(214, 49, 65);
}
::-webkit-scrollbar {
display: none;
}
#mapDiv {
flex: 1;
}
#map {
width: 100%;
height: 100%;
z-index: 0;
}
#refreshButton{
display: flex;
align-items: center;
position: relative;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: white;
border-radius: 5px;
border-color: gray;
border-style: solid;
border-width: 1px 1px 1px 1px;
opacity: 0.6;
text-align: center;
}
#refreshButton:hover{
opacity: 0.8;
cursor: pointer;
}
#refreshButtonPictogram{
margin: auto;
}
@media screen and (max-width: 500px) {
#mainContainer {
flex-direction: column;
}
#mapDiv,
#bars {
flex: 1;
}
}
以下对我有用：
HTML
<body>
<div id="map"></div>
<button id="refreshButton">Refresh Button</button>
</body>
CSS
#refreshButton {
position: absolute;
top: 20px;
right: 20px;
padding: 10px;
z-index: 400;
}
从上面链接的 JSBin 截取的屏幕截图。
我还遇到了有关在传单中创建自定义控件按钮的资源。
更新
我将您的 HTML 更改为以下内容：
<div id="mainContainer">
<div id="mapDiv">
<div id="map">
<button id="refreshButton">
Button
</button>
</div>
</div>
<div id="bars"></div>
</div>
我还将#refreshButton位置规则更改为absolute并为其设置了 500 的 z-index。
除此之外，我补充说
html, body {
height: 100%;
margin: 0;
padding: 0;
}
看看这个 JSBin 中更新的解决方案。