Question

我正在尝试让我的openlayers地图符合浏览器的大小，并且每次浏览器调整大小时都会调整大小。所以我可以有响应式设计。

我的代码结构是这样的

<script type='text/javascript' src='OpenLayers.js'></script>
<script type='text/javascript'>


var map;
var options = {   
  controls: [],
  maxResolution: "auto",
  projection: "EPSG:900913",
  units: 'm'
}

function init(){
 map = new OpenLayers.Map('map_element', options);
 //set layers, styles for vectors layers, set and activate click events etc.
}

</script>


<body onload='init();'>

<div id='map_element' style=" width:800px; height:400px ; z-index:1; position: relative;text-align:center;"> </div>

根据this我尝试使用

//if browser loads 
//this is inside init() because = body.onload > init > resize map
map = new OpenLayers.Map('map_element', options);
map.updateSize();

//if browser resized
    window.onresize = function()
    {map.updateSize();}

但不起作用

此外，如果我在style=" width:100%; map_element中设置div，则地图会从页面中消失。

发生了什么事？我错过了什么？

提前致谢

Answer 1

看一下这个例子： http://openlayers.org/dev/examples/fullScreen.html

这是响应式的，CSS通过宽度和高度设置为100％来完成大部分工作。

流体开放层 - 响应式设计

1 个答案: