1

我有一个带有导航栏和侧边栏（跨度 3）+ 地图（跨度 9）的基本引导布局。我的问题是，当我在浏览器中查看此代码时，地图如下所示：http ://dl.dropbox.com/u/15923835/bootstr.jpg

但我想要地图的固定大小（它应该覆盖页面的 80%。我试图在每个 DIV 中设置一个固定的高度，但没有任何反应。你有什么建议吗？

抱歉我的技术解释不好（我正在努力学习）

这是代码的副本：

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span3">
      <div class="well sidebar-nav">
        <ul class="nav nav-list">
          <li class="nav-header">Sidebar</li>
          <li class="active"><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li class="nav-header">Sidebar</li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!--/.well -->
    </div><!--/span-->
    <div class="span9">

        <div class="hero-unit" id="map"></div>

            <script src="../leaflet/dist/leaflet.js"></script>           
            <script>

                var map = new L.Map('map');

                var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',

                    cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade',

                    cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});

                map.setView(new L.LatLng(55.367, 10.811), 6).addLayer(cloudmade);

        var trailers = new L.LayerGroup();

        <?php $query = mysql_query("SELECT tblmain.modemid, max(dateepoch), tblmain.date, tblmain.speed, tblmain.la, tblmain.lo, tblmain.t1, tblmain.t2, tblmain.spt1, tblmain.spt2, tbltrailers.name \n"
            . "FROM tblmain\n"
            . "LEFT JOIN tbltrailers\n"
            . "on tblmain.modemid = tbltrailers.modemid\n"
            . "GROUP BY modemid ");
         $i = 1;
         while ($row = mysql_fetch_array($query)){
         $modemid=$row['modemid'];
         $trailernummer=$row['name'];
         $date=$row['date'];
         $lat=$row['la'];
         $lon=$row['lo'];
         $speed=$row['speed'];
         $t1=$row['t1'];
         $t2=$row['t2'];
         $spt1=$row['spt1'];
         $spt2=$row['spt2'];
         echo ("var marker$i = new L.Marker(new L.LatLng($lat, $lon));
         marker$i.title = \"test\";
         marker$i.bindPopup(\"<h1>$trailernummer</h1><br/>Modemid: $modemid<br/>Datum: $date<br/>Temp 1: $t1<br/>Temp 2: $t2<br/>Setpoint 1: $spt1<br/>Setpoint 2: $spt2 <br/> \").openPopup();
        trailers.addLayer(marker$i);
         "); 
         $i++;
         }
         ?> 
                map.addLayer(trailers);


                //marker.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();

            </script>
      </div>
    </div>
</div>

4

1 回答 1

2

如快速入门中所述：http: //leaflet.cloudmade.com/examples/quick-start.html在 div#map 上使用样式

<div id="map" style="height: 200px"></div>
于 2012-07-03T18:49:10.530 回答