Google 地图 100vh 仅适用于 Android 应用平板电脑

Question

#map-canvas {height: 100vh; width: 100vw;}

<ion-view title="Truck Map">
    <ion-nav-buttons side="left">
        <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
    </ion-nav-buttons>
    <ion-content>
        <div data-tap-disabled="true">
            <div id="map-canvas"></div>
        </div>
        <button id="map_refresh_btn" class="button icon ion-refresh button-positive" ng-click="refreshMap()">
              Refresh
        </button>
    </ion-content>
</ion-view>

这是我在 angular / ionic / cordova android 和 ios 应用程序中使用的 css 和 html。出于某种原因，我还没有弄清楚，android 平板电脑无法显示带有此 css 的 google 地图，尽管它在所有 iOS 设备和所有Android 电话。如果我给它一个特定的高度和宽度（以像素为单位），地图就会显示出来，但这不是一个灵活的解决方案。任何有关原因或修复的帮助将不胜感激。

Answer 1

Cordova Android 使用操作系统提供的 WebView 组件。您必须确保平板电脑的 Android 版本支持视口单位：

http://caniuse.com/#feat=viewport-units

您可以帮助自己绝对定位地图并将其设置为 100% 高度。

或者，您可以将 Cordova Android 项目迁移到支持视口单元的 CrossWalk WebView。 Ionic CLI 使这变得相对容易：

http://ionicframework.com/blog/crosswalk-comes-to-ionic/

Answer 2

我的猜测是父 div 默认大小为 0，导致具有 map-canvas id 的子 div 也没有大小，导致地图不显示。

<div data-tap-disabled="true">
  <div id="map-canvas"></div>
</div>

除了 tap 属性外，您似乎没有将父项 div 用于任何用途。为什么不尝试将 2 div 合并为 1 并保持 css 不变？

<div id="map-canvas" data-tap-disabled="true">
</div>

Google 地图 100vh 仅适用于 Android 应用平板电脑

Google maps 100vh not working on Android app tablets only

android

angularjs

cordova

ionic