Question

我想在我的Leaflet地图的右上角添加一个按钮（从顶部20px，从右边20px）。问题是我不确定如何正确地做到这一点。问题是，当我使用传单类＆＃34;传单顶部传单右键＆＃34;时，我的按钮不可点击，当我将鼠标悬停在它上面时，没有任何反应。它只是作为地图的一部分。

这是我的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;
  }
}

Answer 1

以下对我有用：

<强> HTML

[
   0: ['acc row 1', 'another acc row1'],
   1: ['acc row 2'....]
]

<强> CSS

<body>
  <div id="map"></div>
  <button id="refreshButton">Refresh Button</button>
</body>

以上代码为a JSBin。

取自上面链接的JSBin的截图。

我也遇到了this resource on creating a custom control button in leaflet。

更新

我将您的HTML更改为以下内容：

#refreshButton {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 10px;
  z-index: 400;
}

我还将<div id="mainContainer"> <div id="mapDiv"> <div id="map"> <button id="refreshButton"> Button </button> </div> </div> <div id="bars"></div> </div>排名规则更改为#refreshButton，并为其指定了z指数。

除此之外，我添加了

absolute

查看this JSBin中的更新解决方案。

将可点击按钮添加到Leaflet地图

1 个答案:

更新