OnsenUI: Карты Google имеют 0 высоты внутри ‹на странице› (только для Android 2.3/Webkit)

При использовании OnsenUI, если я помещаю Карты Google на ons-страницу, я не могу сделать так, чтобы карта имела полную высоту страницы/браузера, пробовал все, но ее высота по-прежнему была равна 0 (карта вообще не отображается). Но если я перемещаю его за пределы страницы, он хорошо работает с полной шириной и высотой. Из-за структуры моего шаблона я не могу переместить карту за пределы страницы.

Эта проблема ПРОИСХОДИТ ТОЛЬКО в Android 2.2 или 2.3. Если вы хотите увидеть его на рабочем столе, вы можете использовать браузер Midori. Карта нормально отображается в Firefox и Chrome или в Android 4.x Webkit.

Вот codepen: codepen.io/tranduyhung/pen/RNNBEQ

Я пробовал много решений, но все еще не мог заставить его работать. Если у вас есть какие-либо советы, я действительно ценю!

P/S: Если вам нужен браузер Midori, загрузите его здесь http://midori-browser.org/download/choose/. Я использую 0.4.3


google-maps android css webkit onsen-ui
person Hung Tran    schedule 21.11.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема, похоже, заключается в div внутри div содержимого страницы, сгенерированном директивой ons-page, которая имеет вычисленную высоту 0px. Вы можете попробовать добавить модификатор к ons-page, чтобы установить собственный стиль для этого div, например:

HTML:

<ons-page modifier="map">
  <ons-toolbar>
    <div class="center">My App</div>
  </ons-toolbar>
  <div id="map-canvas"></div>
</ons-page>

CSS

.page--map .page--map__content>div{
  height:100%;
}

Проверьте это модифицированное перо: http://codepen.io/anon/pen/emNpzX.

person Guillermo Gutiérrez    schedule 24.11.2014