OpenLayers Hello World示例不適用於HTML5？

我正嘗試在我的網站上使用地圖API。我原本是在尋找openstreetmap，但很快就意識到，如果我想顯示地圖，我需要使用openlayers。我仍然對這兩者之間的關係很模糊，所以我會給它們加上標籤。我只是試圖得到一個你好世界的例子。OpenLayers Hello World示例不適用於HTML5？

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和開放源代碼知道的不多，知道問題的癥結所在，但是已經縮小了問題的範圍。任何人都可以解釋什麼是解決方案，爲什麼？

來源

2013-04-23 Russ

只是將其添加到<head>部分：

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

的問題是，在標準模式下，元素被默認爲只大如它們所包含的元素。寬度和高度達到100％的<div>完全沒有任何影響;所以地圖沒有大小。確保備份到元件的所有元素都是其容器的100％，這意味着它們將實際填滿顯示器，而不是沒有尺寸。

請注意，從技術上講，它只是高度爲0;元素的寬度默認爲包含元素的寬度（以及頂層<html>元素的視口），而元素的高度取決於其子元素的高度。當父母沒有指定身高時，身高達到100％，反而會被視爲高度爲auto，這意味着將其基於其子女的身高。由於它沒有孩子，所以高度爲0.

如果您想了解更多詳情，請查看CSS Visual Formatting Model規範。添加HTML5文檔類型（或其他許多doctype中的任何一種，雖然瀏覽器之間的確切列表各不相同），它使瀏覽器進入標準模式，他們試圖儘可能遵循CSS規範。沒有它，你在怪癖模式下工作，其中各種瀏覽器實現各種非標準行爲（主要基於舊版瀏覽器如Netscape 4或IE 5.5的工作方式）。 Here's a description基於Netscape 4如何實現它們，在怪異模式下工作的百分比高度。這裏是各種瀏覽器的list of various behaviors that change in quirks mode，這裏是Mozilla's list of how quirks mode varies in Gecko（Firefox後面的引擎）。

來源

2013-04-23 16:17:05

夢幻般的解釋 – Russ 2013-04-23 17:42:52

OpenLayers Hello World示例不適用於HTML5？

回答

相關問題