#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平板电脑在所有iOS设备和所有Android手机上都可以正常工作，但它无法通过此CSS显示google map。如果我指定了特定的高度和宽度（以像素为单位），则会显示地图，但这不是灵活的解决方案。任何有关原因或修复的帮助将不胜感激。
我的猜测是父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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句