2014-03-25 46 views
1

如何讓自舉導航欄浮動在谷歌地圖上?Boostrap nav浮動在谷歌地圖上

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <style type="text/css"> 
     html { height: 100% } 
     body { height: 100%; margin: 0; padding: 0 } 
     #map-canvas { height: 100% } 
    </style> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> 
    <script type="text/javascript" 
     src="https://maps.googleapis.com/maps/api/js?&sensor=false"> 
    </script> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     function initialize() { 
     getLocation(); 
     } 
     google.maps.event.addDomListener(window, 'load', initialize); 

     function getLocation(){ 
     if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(success, error); 
     } else { 
      // default location 
     } 
     } 

     function success(position){ 
     var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 

     var mapOptions = { 
      center: latlng, 
      zoom: 12 
     }; 
     var map = new google.maps.Map(document.getElementById("map-canvas"), 
      mapOptions); 
     } 

     function error(msg){ 
     if (msg.code == 1) { 
      //PERMISSION_DENIED 
     } else if (msg.code == 2) { 
      //POSITION_UNAVAILABLE 
     } else { 
     } //TIMEOUT 
     } 
    </script> 
    </head> 
    <body> 
    <nav class="navbar navbar-default" role="navigation"> 
     <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
       <li class="divider"></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <form class="navbar-form navbar-left" role="search"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li><a href="#">Action</a></li> 
       <li><a href="#">Another action</a></li> 
       <li><a href="#">Something else here</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav> 

    <div id="map-canvas"/> 
    </body> 
</html> 
+0

你是什麼意思浮動的導航欄上的意思嗎? – hichris123

+1

我的意思是導航欄位於地圖頂部... – Alvin

+1

絕對可以對此項目進行定位嗎?雖然這將涵蓋部分地圖功能。 http://jsbin.com/rawub/1/edit?html,css,output – davidpauljunior

回答