如何在leaflet地图上添加按钮

Question

我在我的应用程序中使用leaflet地图，并使用bootstrap实现响应式。我的地图下方有一些按钮，看起来像这样。

但是我想要像这样将按钮叠加在地图上。

以下是我的HTML代码：

        <div class="span9" style="height:100%">
        <div id="map"></div>
        <div style="padding-left: 10px;padding-right: 10px">
            <input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" /> 
            <input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
            <span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
        </div>
    </div>

我的地图 CSS 样式

html, body, #map, .row-fluid{
 height: 100%;
 }

 #map {
width: 100%;
}


.btnStyle {
background-color: #4D90FE; 
background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED); 
border: 1px solid #3079ED; 
color: #FFFFFF;
 padding: 4px;
 margin-top: 4px;
 margin-bottom: 4px;
 width:100%
}

.lblStyle {
color: red;
 padding: 4px;
 margin-top: 4px;
 margin-bottom: 4px;
width: 100%;
font-weight: bold;
}

- vaibhav shah

---

我想知道在leaflet地图图例中是否有可能点击图层内的“按钮”。 - João Víctor Melo

Answer 1

Leaflet.js 提供以下类:

leaflet-bottom
leaflet-top
leaflet-left
leaflet-right

通用的HTML示例：

    <div id="divmap"> <!--leaflet map wrapper div -->
        <div id="map" > <!--leaflet map div -->
            <div class="leaflet-bottom leaflet-left">
                <div id="marker-legend">  <!-- here the legend -->
                </div>
            </div>          
        </div>
    </div>

将之前的HTML代码适应于你的具体问题：

 <div class="span9" style="height:100%">
    <div id="map">
        <div class="leaflet-bottom leaflet-left">
            <input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3 leaflet-control" /> 
            <input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3 leaflet-control" />
            <span id="studentsCount" class="lblStyle span3 leaflet-control"> Ikke rutesat: </span>
        </div>
    </div>
</div>

- Cellus - A.STEFANI

---

风格很不错。但是我再也无法点击按钮了。有任何想法是为什么吗？ - nha

@nha 可能是 z 值？ - phil294

问题在于 leaflet-bottom、-top、-right、-left 具有 pointer-events: none; 属性，这意味着该元素不再能够成为鼠标事件的目标。你可以通过在按钮中添加 pointer-events: auto; 来覆盖它。 - elpunkt

Answer 2

我希望我理解正确并且能够帮到你。 以下是代码片段：http://jsfiddle.net/g3JrG/4/ HTML：

<div class="span9" style="height:100%">
    <div id="map-wrapper">
        <div id="map"></div>
        <div id="button-wrapper">
            <input type="button" id="Btn1" value="Btn1" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" class="btnStyle span3" /> 
            <input type="button" id="Btn3" value="Btn3" class="btnStyle span3" />
         </div> 
    </div>
    <span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>

CSS：

#map-wrapper {
    width: 100%;
    height: 500px;
    position: relative;
    border: 1px solid black;
}

#map {
    width: 100%;
    height: 100%;
    background-color: green;
}

#button-wrapper {
    position: absolute;
    bottom: 10px;
    width: 100%;
    border: 1px solid red;
}

TJL

- NinjaOnSafari

---

请访问jsfiddle.net/GbzR3并点击“获取地图”，您将了解我在说什么。 - vaibhav shah

将以下内容添加到按钮的容器中 position: relative; z-index: 9999;。 - NinjaOnSafari

如果底层地图实现了“click”事件，那么这将如何工作？在这种情况下，当您单击按钮时，按钮点击以及地图点击都会触发。我在我的案例中看到了这一点。 - Chintan Pathak

@ChintanPathak 当你点击按钮时，你需要阻止事件冒泡 https://developer.mozilla.org/zh-CN/docs/Web/API/Event/stopPropagation - NinjaOnSafari

Answer 3

我希望我正确理解了你的问题。你想在地图内显示三个按钮，地图应该有圆角，按钮也应该有圆角。 希望这能帮到你。

试试这个：

HTML：

<div class="span9" style="height:100%">
    <div id="map">
        <div style="padding-left: 10px;padding-right: 10px; position:absolute; bottom:-10px; width:100%;">
            <input type="button" id="Btn1" value="Btn1" onclick="" class="btnStyle span3" />
            <input type="button" id="Btn2" value="Btn2" onclick="SaveRoutes()" class="btnStyle span3" /> 
            <input type="button" id="Btn3" value="Btn3" onclick="editRoutes()" class="btnStyle span3" />
        </div> 
    </div>
    <span id="studentsCount" class="lblStyle span3"> Ikke rutesat: </span>
</div>

CSS：

html, body, #map, .row-fluid{
    height: 100%;
}

#map {
    width: 100%;
    border-radius: 15px;
    border:solid 1px black;
}


.btnStyle {
    cursor:pointer;
    background-color: #4D90FE; 
    border-radius: 15px;
    background-image: -moz-linear-gradient(center top , #4D90FE, #4787ED); 
    border: 1px solid #3079ED; 
    color: #FFFFFF;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    width:28%
}

.lblStyle {
    color: red;
    padding: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    width: 100%;
    font-weight: bold;
}

Fiddle

- Abhishek Jain

---

我曾经尝试过这个方法。但问题是，这样做后，按钮无法点击，地图会重叠在按钮上，导致按钮不显示。 - vaibhav shah

请再次检查 Fiddle。我已经检查并编写了一些 jQuery 进行检查，它可以正常工作。 - Abhishek Jain

请查看此链接 http://jsfiddle.net/GbzR3/ 并点击“获取地图”。您将了解我在说什么。 - vaibhav shah

Answer 4

我曾经遇到过同样的问题，我想在我的地图上添加一些按钮，于是我编写了这个函数，在地图上添加自定义浮动操作按钮。

您可以在任何leaflet地图中使用下面的函数：

addFloatingButton(mapObject, textForButton, onClickFunction, elementID='mapButton1') {
        // Create the button element with basic dom manipulation
        let buttonElement = document.createElement(elementID);

        // Set the innertext and class of the button
        buttonElement.innerHTML = textForButton;
        buttonElement.className = 'leaflet-floating-button';
        
        // Add this leaflet control
        var buttonControl = L.Control.extend({
          options: {
            // if you wish to edit the position of the button, change the position here and also make the corresponding changes in the css attached below
            position: 'bottomright'
          },
      
          onAdd: function () {
            var container = L.DomUtil.create('div');
            container.appendChild(buttonElement);
            return container;
          }
        });
      
        // Add the control to the mapObject
        mapObject.addControl(new buttonControl());
      
        // The user defined on click action added to the button
        buttonElement.onclick = onClickFunction;
      }

还别忘了为按钮元素添加CSS。

.leaflet-floating-button{
  position : absolute;
  bottom : 20px;
  right : 20px;
  padding : 10px 20px;
  background-color : #f0efeb;
  color : #000000;
  border : 1px solid #000;
  border-radius : 5px;
  cursor : pointer;
}

现在您可以直接在您的代码中调用此函数：

addFloatingButtonToMap(myMap, 'Navigate to Point', 
  ()=>{
  //place your on click action code here
  },
'navigateButton')     

如果有任何问题，请让我知道。

- Pranav Soni