Question

在Google Map Page上工作时，我遇到了一个有趣的问题。实际上我希望Map DIV将覆盖70％的宽度，剩下30％用于My Menus，60％用于我的网站横幅留下40％。

当我以％为单位指定div高度和宽度时，地图将无法正确渲染，而是根据指定的％属性缩小到顶部或左侧。但是当我在px中明确指定高度和宽度时说400px，地图将完美呈现。

我还尝试了minwidth和minheight样式属性。

Answer 1

这实际上取决于您当前的HTML和CSS，但这是一种方法。

主要布局使用YUI Grids框架进行一些调整来校正地图的高度。正如Gutzofter提到的那样，解决方案的关键是为地图的所有祖先元素指定适当的高度。以下代码在IE6，IE7，IE8，Chrome 3和Firefox 3.5上进行了测试

托管演示：http://jsbin.com/okeja（可通过http://jsbin.com/okeja/edit进行编辑）

完整来源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>Maps Demo</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <script src="http://www.google.com/jsapi?key=ABQIAAAAyxeu8JwbgrekKUEdhxe4EBTWx8njL9qYLnq46LoOVGM6mIGTuxQWuJ3Va3yaItAmIEsT4jgllHk5Ig" type="text/javascript"></script>
  <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
  <style type="text/css" media="screen">
    html { height: 100%; background-color: #000; overflow: hidden; }
    body { height: 100%; background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
    a:link, a:visited, a:hover { color: gray; }
    #doc3 { height: 100%; padding:0; margin: 0; }
    #bd { height: 100%;}
    .container { height: 60%; }
    .map { height: 100%; }
    #map_canvas { height: 100%; }
    .content { overflow-y: auto; height: 40%; }
  </style>
</head>
<body>
  <div id="doc3" class="yui-t7">
    <div id="bd">
      <div class="yui-gf container">
        <div class="yui-u first">
          <ul>
            <li><a href="#foo">foo</a></li>
            <li><a href="#bar">bar</a></li>
            <li><a href="#baz">baz</a></li>
            <li><a href="#spam">spam</a></li>
            <li><a href="#eggs">eggs</a></li>
          </ul>
        </div>

        <div class="yui-u map">
          <div id="map_canvas"></div>
        </div>
      </div>

      <div class="yui-g content">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia diam quis ipsum iaculis blandit. In mattis nibh ac velit congue a vehicula erat facilisis. Nam imperdiet nulla id tellus commodo et cursus urna aliquam. Donec vestibulum, eros ac rhoncus sodales, mi lacus elementum turpis, quis varius augue orci eget est. In vel vehicula erat. Aliquam eu orci lorem. Nullam a nisi adipiscing purus imperdiet convallis vitae varius elit. Mauris eu hendrerit eros. Sed at nunc sit amet sapien bibendum varius et eu augue. Nulla nisi est, bibendum id interdum vitae, fringilla eu mi. In et dolor est, quis rutrum enim. Vivamus quam nulla, euismod in elementum at, pulvinar nec est. Praesent tincidunt venenatis libero vitae interdum. Nam mattis molestie ligula, et laoreet risus eleifend eu.
          Proin sodales lacus quis sem congue venenatis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer dictum enim a nibh pharetra venenatis. Cras lacinia nibh in eros malesuada id rhoncus erat mattis. Mauris urna ipsum, vulputate nec malesuada ut, volutpat vel magna. Duis blandit, dolor quis convallis faucibus, orci arcu vulputate nulla, a ullamcorper ligula risus eu mi. Quisque magna mauris, molestie id luctus id, aliquam vitae leo. Proin ut ligula et lacus iaculis sollicitudin. Fusce blandit consectetur nisi at cursus. Donec tincidunt sem et justo dapibus eu facilisis nunc laoreet. Quisque nibh urna, convallis ac ullamcorper in, dapibus et arcu. Nullam vel posuere nulla. Maecenas sed erat quam, placerat imperdiet metus.
          Vivamus scelerisque, metus vitae venenatis pulvinar, ante libero auctor nisi, id malesuada orci tellus mattis nunc. Cras pretium sem nec est suscipit dictum. Etiam viverra fermentum augue, a gravida velit facilisis sed. Cras quis velit tortor, sit amet pellentesque leo. Mauris ligula nisi, tincidunt at faucibus a, aliquam vel elit. Etiam fringilla diam nisl, faucibus vestibulum justo. Aliquam erat volutpat. Sed diam diam, sodales eget mattis varius, vehicula at ipsum. Suspendisse semper blandit neque, vel bibendum dolor tincidunt at. Sed eleifend mollis metus vitae vehicula. Proin in augue vitae velit auctor vulputate. Sed auctor dictum blandit. Sed diam mi, aliquet vitae tempus sed, pharetra vel felis. Praesent tincidunt ipsum faucibus odio scelerisque quis lobortis odio facilisis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
        </p>
      </div>
    </div>
  </div>

  <script>
    function mapsLoaded() {
      var map = new google.maps.Map2(document.getElementById("map_canvas"));
      map.setMapType(G_SATELLITE_MAP);
      map.enableContinuousZoom();

      var geocoder = new GClientGeocoder();
      geocoder.getLatLng('Dubai', function(latLng){
        map.setCenter(latLng, 7);
        for (var i = 0; i < 4; i++) {
          after(3 * i, function(){map.zoomIn(null, null, true)});
        }
      });
    }

    function after(seconds, fn) {
      setTimeout(fn, seconds * 1000);
    }

    function loadMaps() {
      google.load("maps", "2", {"callback" : mapsLoaded});
      google.load("jquery", "1.3");
    }

    loadMaps();
  </script>
</body>
</html>

Answer 2

尝试在map-canvas周围使用map-wrapper div，并在map-wrapper上设置百分比。您可能想查看此book。这本书详细介绍了自动调整大小。摘录在google books上，请阅读第6章。主要是使用一些JavaScript和CSS。

正确调整DIV中谷歌地图的大小百分比

2 个答案: