2

我正在尝试开始在我的网站上使用地图 API。我最初是在看openstreetmap，但很快意识到如果我想显示地图，我需要使用openlayers。我对这两者之间的关系仍然很模糊，所以我会标记它们。我只是想让一个 hello world 示例运行。

OpenLayers 有这个页面来引导你完成你的第一个实现。入门页面声明将以下代码用于您的第一个示例：

<html>
<head>
  <title>OpenLayers Example</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
    </head>
    <body>
      <div style="width:100%; height:100%" id="map"></div>
      <script defer="defer" type="text/javascript">
        var map = new OpenLayers.Map('map');
        var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
            "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
        map.addLayer(wms);
        map.zoomToMaxExtent();
      </script>

</body>
</html>

如果您将页面声明为 html5，则此代码不起作用。添加此标头后，示例将立即停止工作：

<!DOCTYPE html>
<meta charset='utf-8'>

我不明白为什么会这样。该页面非常简单，不幸的是我对 html5 和 openlayers 了解不足，无法知道问题可能是什么，但已经缩小了问题的范围。谁能解释解决方案是什么以及为什么？

4

1 回答 1

7

只需将其添加到该<head>部分：

<style>html, head, body { width: 100%; height: 100% }</style>

问题是在标准模式下，元素默认只与它们包含的元素一样大。<div>宽度和高度为 100% 的结果是 100% 什么都没有；所以地图没有大小。确保备份到该<html>元素的所有元素都是其容器的 100% 意味着它们将实际填充显示，而不是没有大小。

请注意，从技术上讲，只有高度为 0；元素的宽度默认包含元素的宽度（以及顶级<html>元素的视口），而元素的高度取决于其子元素的高度。100% 的高度，当父母没有指定高度时，最终只会被视为高度auto，这意味着它基于其孩子的高度。由于它没有孩子，因此高度最终为 0。

如果您想了解更多详细信息，请查看CSS 视觉格式模型规范。添加 HTML5 文档类型（或许多其他文档类型中的任何一种，尽管确切的列表因浏览器而异），使浏览器进入标准模式，在这种模式下，它们试图尽可能地遵循 CSS 规范。没有它，您将在怪癖模式下工作，其中各种浏览器实现各种非标准行为（主要基于旧浏览器，如 Netscape 4 或 IE 5.5 的工作方式）。以下是基于 Netscape 4 如何实现百分比高度在 quirks 模式下如何工作的描述。这是在各种浏览器上以怪癖模式变化的各种行为的列表，这是Mozilla 的怪癖模式在 Gecko 中如何变化的列表（Firefox 背后的引擎）。

于 2013-04-23T16:17:05.640 回答