如何在傳單地圖上放置按鈕

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

我希望我理解你的權利，它可以幫助。 這裏是小提琴：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 2

我希望我能理解你的問題。你想要在地圖中顯示三個按鈕，地圖應該有圓角以及按鈕也應該有圓角。 希望這有助於。

試試這個：

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

Answer 3

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>