发现在ios 手机上 不显示地图
地图页面 顶部是 标题 中部是 地图 底部是信息框 底部高度变化 中部充满剩余空间

image.png

.map {
      width: 100%;
      height: 100%;
      overflow: hidden;
      margin:0;
      font-family:"微软雅黑";
    }

在页面中 中间地图 设置 flex-grow: 1; 充满剩余屏幕 但是ios不显示 地图

height: 100%;
flex-grow: 1;

1. flex: 1;改成 flex-grow: 1; 就行了

还是不行

2.设置一个实际的高度可以

height: 100px;

main { flex: 1;height: calc(100% - 75px); }复制代码

data() {
return {
screenWidth: document.body.clientWidth, // 屏幕宽
screeHeight: document.body.clientHeight, // 屏幕高
}
做法是 求出屏幕的高度 减去 信息框的高度 赋值给地图 就可以了

3.也可以 加个 position: absolute; 让地图充满屏幕 底部信息框 就是 浮在上面 而已

地图高度 是 页面高度减去 标题 就行 如下

 height: calc(100% - 50px);