在 DIV 中正确调整 Google Map 的大小（百分比）答案

【问题标题】：Proper sizing of Google Map in a DIV in percentage在 DIV 中正确调整 Google Map 的大小（百分比）
【发布时间】：2010-12-07 19:01:09
【问题描述】：

我在使用 Google 地图页面时遇到了一个有趣的问题。实际上，我希望 Map DIV 将覆盖 70% 的宽度，剩下 30% 用于我的菜单，60% 的高度将 40% 用于我的网站横幅。

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

我也尝试过 minwidth 和 minheight 样式属性。

【问题讨论】：

页面是否有效？我们可以得到一个链接吗？当您可以查看代码时，这些类型的问题通常会更容易......
对不起，我不能给你这个链接，因为没有用户名和密码它就不能工作，并且有敏感数据，但代码很简单

工作但

不工作

标签： asp.net javascript html stylesheet

【解决方案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>

【讨论】：

+1 这绝对是比我更好的答案。对我来说，代码总是比语言更响亮。

【解决方案2】：

尝试在地图画布周围使用地图包装器 div，并在地图包装器上设置百分比。你可能想看看这个book。这本书详细介绍了自动调整大小。摘录在google books，阅读第6章。主要是用一些JavaScript和CSS完成的。

【讨论】：