Question

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

OpenLayers已this page引导您完成首次实施。入门页面声明第一个示例使用以下代码：

<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知之甚少，知道问题可能是什么，但已经缩小了问题所在。任何人都可以解释解决方案是什么以及为什么？

Answer 1

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

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

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

请注意，从技术上讲，它只是高度为0;元素的宽度默认包含元素的宽度（以及顶级<html>元素的视口），而元素的高度取决于子元素的高度。当父母没有指定高度时，高度为100％，而不是仅仅被视为auto的高度，这意味着将其基于其子女的身高。由于它没有孩子，所以高度最多为0。

如果您想了解更多详情，请查看CSS Visual Formatting Model规范。添加HTML5文档类型（或许多其他文档类型中的任何一种，尽管精确列表因浏览器而异），使浏览器进入标准模式，在这种模式下，他们尝试尽可能地遵循CSS规范。没有它，你正在以怪癖模式工作，其中各种浏览器实现各种非标准行为（主要基于旧版浏览器，如Netscape 4或IE 5.5如何工作）。 {3}根据Netscape 4如何实现它们，在怪癖模式下高度百分比的工作原理Here's a description。这是各种浏览器的list of various behaviors that change in quirks mode，这里是Mozilla's list of how quirks mode varies in Gecko（Firefox背后的引擎）。

OpenLayers Hello World示例不适用于HTML5？

1 个答案: