Javascript 如何在传单地图上放置按钮

我在我的应用程序中使用了传单图&使用引导程序实现响应。 我在那张地图下面有一些钮扣。 看起来像这样

但我想像这样重叠地图上的按钮

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

---

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

试试这个：

HTML:

---

我希望我正确地理解了你，这会有所帮助。 这是小提琴：

HTML:

---

TJL

传单.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>

Ikke rutesat：

我已经试过了。但问题是这样做后，不能点击按钮也地图重叠按钮和按钮不显示。请再次检查小提琴。我已经检查并编写了一些jquery来检查它，它工作得很好，请看这个&单击getmap。你会知道我在说什么。请看这个jsfiddle.net/GbzR3&单击GetMap。通过按钮

位置：relative，你会知道我在说什么；z指数：9999如果基础映射实现了
单击
事件，这将如何工作？在这种情况下，当您单击按钮时，按钮单击和地图单击都将触发。我在我的案例中看到了这一点。@ChintanPathak当你点击按钮时，你需要阻止事件冒泡——风格很好。但是我不能再点击按钮了。知道为什么吗？@nha可能是z值？@nha@Magda问题是
传单底部
，
-top
，
-right
，
-left
具有属性
指针事件：无这意味着该元素不能再成为鼠标事件的目标。您可以通过添加
指针事件：auto到您的按钮。
<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>

#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;
}

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

    <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>

 <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>