gpt4 book ai didi

css - 流体开放层 - 响应式设计

转载 作者:太空宇宙 更新时间:2023-11-03 18:29:48 25 4
gpt4 key购买 nike

我试图让我的 openlayers map 适合浏览器的大小,并在每次浏览器调整大小时调整大小。所以我可以进行响应式设计。

我的代码结构是这样的

<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();}

但不起作用

此外,如果我在 map_element div 中设置 style="width:100%;, map 将从页面中消失。

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

提前致谢

最佳答案

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

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

关于css - 流体开放层 - 响应式设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20061241/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com