жидкий openlayers - отзывчивый дизайн

Я стараюсь, чтобы карта openlayers соответствовала размеру браузера, а также каждый раз, когда изменяется размер браузера. Поэтому я могу иметь отзывчивый дизайн.жидкий 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_elementdiv карта исчезает со страницы.

Что происходит? Что мне не хватает?

Заранее спасибо

источник

2013-11-19 slevin

Посмотрите на этот пример: http://openlayers.org/dev/examples/fullScreen.html

Это реагирует и CSS делает большую часть работы по ширине и высоте, установленной на 100%.

источник

2013-11-20 09:53:37

Спасибо, но это полноэкранный режим. Я попытался изменить свой код, в соответствии с кодом примера и ничего. Карта все еще исчезает на странице – slevin

EDIT Работает только в том случае, если я устанавливаю 'height: 100%' в 'div', который содержит' div'. Но если я устанавливаю высоту, то некоторые элементы переполняются, так как у меня есть динамический контент. Итак, исправляет карту, «уничтожает» контейнер ... Думаю, что я не буду устанавливать высоту для контейнера и просто использовать медиа-запросы для карты – slevin

жидкий openlayers - отзывчивый дизайн

ответ

Смежные вопросы