Как сделать карту,что бы менялась в зависимости от размеров экрана?

Пост в архиве.

Ирина Благодарова

30 апреля 2014, 10:29

Здравствуйте! Как сделать карту, что бы менялась в зависимости от размеров экрана.

14 комментариев

Авторизуйтесь, чтобы оставить комментарий

Всеволод Шмыров

28 января 2016, 00:16

Доброе утро!
Достаточно контейнеру карты поставить width|height 100%
http://jsfiddle.net/R5ZEa/5/

Или можно самостоятельно вызывать метод map.container.fitToViewport()
http://jsfiddle.net/Zb48K/4/

Ирина Благодарова

28 января 2016, 00:16

Я делаю как вы говорите, но карта почему то исчезает... Когда ей дать фисированую ширину и высоту.. Она появляеться. Но когда дать в процентах она не работает, исчезает...Что это может быть, подключение API? или что то другое?

dimik

28 января 2016, 00:16

Это ваши CSS стили, АПИ тут вообще не причем.

Если карта исчезает значит у вас размеры родителького контейнера у карты равны нулю, а 100% от нуля будет ноль.

Всеволод Шмыров

28 января 2016, 00:16

Дело действительно не в API. Это особенность верстки в браузере. По умолчанию элементы растягивают по высоте контента и не имеют определенной высоты. При установке процентного значения высоты элемента нужно убедиться, что какой-нибудь из его родителей имеет высоту. В примере http://jsfiddle.net/R5ZEa/5/ html и body растягиваются на 100% высоты экрана.

В этом примере два одинаковых блока: в контейнере и без. Отображается тот, что в контейнере, так как у контейнера есть определенная высота.
http://jsfiddle.net/9rreU/
http://yadi.sk/d/QLhi9bkCNj2FE

dimik

28 января 2016, 00:16

Это вы у контейнера карты заменили.

А нужно чтобы родитель этого контейнера тоже имел размеры

http://htmlbook.ru/samhtml/znacheniya-atributov-tegov/razmer

Ирина Благодарова

28 января 2016, 00:16

я поняла, спасибо большое, что помогли разобраться...

Ирина Благодарова

28 января 2016, 00:16

еще хотела задать вопрос...

div>
как можно поменять height, который добавляеться через js(который сейчас 0px)?

Всеволод Шмыров

28 января 2016, 00:16

Это плохое решение. Если в этом месте поменять высоту, то API все равно будет считать, что контейнер карты нулевой по высоте. А это в свою очередь повлияет на отображение тайлов, расчет видимой области и на много чего еще.

Какую вы решаете задачу? Можете скинуть пример или ссылку на результат ? Вы хотите отобразить элемент по всей высоте какого-то другого, но тот не имеет размера?

Если нужно отобразить карту в какой-то сложной верстке, то нужно элементу map определенный размер задать.

Если вы хотите отобразить карту из скрытого контейнера (к примеру, map изначально с display: none), то после удаления display нужно просто вызвать map.container.fitToViewport().

Ирина Благодарова

28 января 2016, 00:16

вот сайт http://5.s1h.ru/index.php?option=com_content&view=article&id=5&Itemid=126... Карта загружаеться но не до конца. Когда нажимаешь F12 в браузере.. она потом нормально работает...

Ирина Благодарова

28 января 2016, 00:16

Конечно, я еще в стилях добавила

.ymaps-map.ymaps-i-ua_js_yes{

height: 800px !important;

}, что от высоты считалось... Я просто не знаю другого варианта решения этой проблемы..

Ирина Благодарова

28 января 2016, 00:16

Она должна работать, как после нажатия F12..

Ирина Благодарова

28 января 2016, 00:16

как я понимаю, нужно переопределить height, который 0 в ту высоту которая мне нужна..А вот как это сделать?

Всеволод Шмыров

28 января 2016, 00:16

После нажатия F12 открывает средство разработчика и вместе с этим происходит resize окна. И карта подстраивается под уже под существующий размер. Как я говорил, раньше так делать нельзя. Размер карты должен сам устанавливаться в зависимости от размера контейнера карты (в данном случае элемент #map). У вас стоит heigth=100% на html, body, а на всех остальных промежуточных элементах (.wrapper (min-height!=height), .content, .item-page, .moduletable ...) нет.

Вам нужно или всем родительским элемента #map установить какую-нибудь высоту (не min-max), или установить 800px жестко для #map, или как-то программно после построения страницы рассчитывать размер контейнера, устанавливать высоту элементу #map и вызывать map.container.fitToViewport()

Ирина Благодарова

28 января 2016, 00:16

спасибо)