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

Question

我在我的应用程序中使用传单地图并使用引导程序进行响应。我在该地图下方有一些按钮。它看起来像这样。

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

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

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>

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

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

小提琴