android - OnsenUI:在<ons-page>内时，Google Maps的高度为0(仅Android 2.3/Webkit)

使用OnsenUI时，如果我将Google Maps放在ons-page中，则无法使地图具有页面/浏览器的全高，请尝试一切，但其高度仍为0（根本不显示地图）。但是，如果我将其移至ons-page之外，则可以在整个宽度和高度下正常工作。由于模板的结构，我无法将地图移至ons-page之外

仅在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

最佳答案

问题似乎是页面内容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