2013-07-30 15 views
10

Utilizzo la mappa dei volantini nella mia applicazione & utilizzando il bootstrap per la reattività. Ho alcuni pulsanti sotto questa mappa. Sembra qualcosa del genere.Come posizionare i pulsanti sulla mappa dei volantini

enter image description here

ma voglio sovrapporsi pulsanti sulla mappa come questa

enter image description here

Ecco il mio 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> 

mio css per la mappa

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

risposta

10

Spero che hai capito giusto e aiuta. Ecco il violino: 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

+0

per favore vedi questo jsfiddle.net/GbzR3 e clicca su get map. Verrai a sapere cosa sto dicendo –

+0

ho aggiornato il tuo violino: http://jsfiddle.net/GbzR3/2/ – NinjaOnSafari

+1

aggiungi questo al contenitore dalla posizione dei pulsanti: relativo; z-index: 9999; ' – NinjaOnSafari

2

Spero di aver capito bene la tua domanda. Si desidera mostrare tre pulsanti all'interno della mappa e la mappa dovrebbe avere angoli arrotondati e anche i pulsanti dovrebbero avere angoli arrotondati. Spero che questo aiuti.

Prova questo:

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

+0

avevo provato questo. Ma il problema è dopo aver fatto questo questo non posso fare clic sul pulsante mappa anche si sovrappone pulsanti e pulsanti non sono mostrati. –

+0

Per favore controlla di nuovo il violino. Ho controllato e scritto alcuni jquery per controllarlo e funziona perfettamente –

+0

per favore vedi questo http://jsfiddle.net/GbzR3/ e clicca su get map. Verrai a sapere cosa sto dicendo –

6

Leaflet.js fornisce le seguenti classi:

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

HTML generico esempio:

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

Adattare il codice HTML precedente al particolare domanda:

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

Lo stile è bello. Tuttavia non posso più fare clic sul pulsante. Qualche idea del perché? – nha

+0

Hai funzionato? – Magda

+0

@nha forse z-value? – Blauhirn

Problemi correlati