主要代码：
wxml:
<view class="container">
<scroll-view class="main" scroll-y>
<view style="height: 100%;"></view>
<map class="map" id="map" style="width: 100%; height: 200px;"></map>
</scroll-view>
<view class="btn">按钮</view>
</view>
wxss:
page, .container {
height: 100%;
width: 100%;
}
.container {
display: flex;
flex-direction: column;
}
.container .main {
flex: 1;
}
.container .btn {
height: 90rpx;
background: #ff5200;
color: #fff;
line-height: 90rpx;
text-align: center;
}
手机上效果图
代码片段：https://developers.weixin.qq.com/s/A0JmrkmN7087
wxml：
<view class='map-box'>
<map class="map"></map>
</view>
<view class="btn">按钮</view>
wxss：
page {
height: 100%;
}
.map-box {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
padding-bottom: 90rpx;
}
.map {
height: inherit;
width: 750rpx;
}
.btn {
height: 90rpx;
width: 750rpx;
position: fixed;
bottom: 0;
line-height: 90rpx;
text-align: center;
color: #fff;
background: #ff5200;
}
手机效果：
思路：map外面包一个view 叫map-box
map-box设置padding-bottom为 按钮的高度
map设置为继承高度
cover-view 可实现自定义， 创建于原生组件map之上