OpenLayers Hello World 예제가 HTML5에서 작동하지 않습니까?

내 웹 사이트에서지도 API를 사용하여 시작하려고합니다. 원래는 openstreetmap을 찾고 있었지만 빠르게 맵을 표시하려면 openlayers를 사용해야합니다. 나는이 둘의 관계에 대해 아직 모호하기 때문에 둘 다 태그를 붙일 것이다. 나는 단순히 안녕하세요 세상의 모범을 보이려고 노력하고 있습니다.OpenLayers Hello World 예제가 HTML5에서 작동하지 않습니까?

OpenLayers는 첫 번째 구현 과정을 안내하기 위해 this page을가집니다. 시작하기 페이지 상태는 첫 번째 예를 들어, 다음 코드를 사용합니다 : 당신이 HTML5로 페이지를 선언하는 경우이 코드는 작동하지 않습니다

<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>

. 이 것이 왜 이해가 안

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

: 즉시이 헤더를 추가로 예는 작동을 멈 춥니 다. 이 페이지는 매우 단순하고 불행히도 html5와 openlayers에 대해 충분히 알지 못해 문제가 무엇인지 알 수는 있지만 문제의 범위가 좁혀졌습니다. 누구나 솔루션이 무엇이며 왜 그런지 설명 할 수 있습니까?

출처

2013-04-23 Russ

그냥 <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 doctype (또는 다른 많은 doctype 중 하나를 추가하는 것은 정확한 목록이 브라우저마다 다르지만)을 브라우저를 표준 모드로 전환하여 CSS 사양을 최대한 준수하려고 시도합니다. 이 기능이 없다면 여러 브라우저가 다양한 비표준 동작 (넷스케이프 4 또는 IE 5.5와 같은 오래된 브라우저의 작동 방식을 주로 반영)을 구현하는 버크 모드 (quirks mode)로 작업하고 있습니다. 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

OpenLayers Hello World 예제가 HTML5에서 작동하지 않습니까?

답변

관련 문제