Html 如何在传单地图上放置按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17942889/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to put buttons on the leaflet map
提问by vaibhav shah
I am using leaflet map in my application & using bootstrap for responsiveness. I have some buttons bellow that map. It looks something like this.
我在我的应用程序中使用传单地图并使用引导程序进行响应。我在地图下方有一些按钮。它看起来像这样。
But I want to overlap buttons on map like this
但我想像这样在地图上重叠按钮
Here is my HTML
这是我的 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>
My css for map
我的地图 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;
}
回答by NinjaOnSafari
I hope i understood you right and it helps. Here is the fiddle: http://jsfiddle.net/g3JrG/4/
我希望我理解你是正确的，它会有所帮助。这是小提琴：http: //jsfiddle.net/g3JrG/4/
HTML:
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:
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
天成
回答by Cellus - A.STEFANI
Leaflet.js provides the following classes:
Leaflet.js 提供以下类：
leaflet-bottom
leaflet-top
leaflet-left
leaflet-right
Generic HTML example:
通用 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>
Adapting the previous HTML to your particular question:
根据您的特定问题调整之前的 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>
回答by Abhishek Jain
I hope i understood your question right. You want to show three buttons inside the map and map should have rounded corners as well as the buttons should also have rounded corners. Hope this helps.
我希望我理解你的问题。你想在地图内显示三个按钮，地图应该有圆角，按钮也应该有圆角。希望这可以帮助。
Try this:
尝试这个：
HTML:
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:
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;
}
