2010-09-13 99 views
2

我正在使用谷歌地圖作爲頁面。我要成立的層地圖,在100%的寬度100%身高減去200像素的工具欄左側:兩個div位置

<div id="toolbar" style="float: left;width: 20%">left</div> 
<div id="map" style="float: left;width: 80%;height: 100%;"></div> 

此代碼的工作,但在工具欄調整大小。我只需要200像素。我該如何保存地圖的位置? 代碼:

<html> 
    <head> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <style> 
      body, html 
      { 
       width: 100%; 
       height: 100%; 
      } 

      body 
      { 
       margin: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <script> 
      $(document).ready(function() { 
        var city = new google.maps.LatLng(56.3, 44) 

        var mapOptions = { 
         zoom: 12, 
         center: city, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        } 
        map = new google.maps.Map($('#map').get(0), mapOptions) 
      }) 
     </script> 
     <div id="toolbar" style="float: left;width: 20%">left</div> 
     <div id="map" style="float: left;width: 80%;height: 100%;"></div> 
    </body> 
</html> 

回答

0

它剝落一點在Safari,所以我不得不來包裝#map的div在另一個div來解決這個問題。試試這個:

<html> 
    <head> 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
     <style> 
      body, html 
      { 
       width: 100%; 
       height: 100%; 
      } 

      body 
      { 
       margin: 0; 
      } 
     </style> 
    </head> 
    <body> 
     <script> 
      $(document).ready(function() { 
        var city = new google.maps.LatLng(56.3, 44) 

        var mapOptions = { 
         zoom: 12, 
         center: city, 
         mapTypeId: google.maps.MapTypeId.ROADMAP 
        } 
        map = new google.maps.Map($('#map').get(0), mapOptions) 
      }) 
     </script> 
     <div id="toolbar" style="float: left; width: 200px;">left</div> 
     <div style="margin-left: 200px;"> 
      <div id="map" style="width: 100%; height: 100%;"></div> 
     </div> 
    </body> 
</html> 
+0

有水平滾動條了。 – Ockonal 2010-09-13 13:21:02

+0

嗯...它是大約200像素的水平滾動?另外,你還有寬度:100%的#map風格? – 2010-09-13 13:32:13

+0

是的,滾動是〜200像素 – Ockonal 2010-09-13 13:50:09

0

,如果你不使用CSS復位試試這個:


<div id="toolbar" style="float: left;width: 20%;margin:0;padding:0">left 
<div id="map" style="float: left;width: 80%;height: 100%;margin:0;padding:0"> 
+0

工具欄在調整大小時更改其自己的大小 – Ockonal 2010-09-13 13:21:45

+0

OP希望工具欄爲200px,而不是20%。 – 2010-09-13 13:31:08