小程序 地图 开发 组件 覆盖物

我的需求是
1、显示地图
2、在地图上增加覆盖物
3、地图距离底部边距有90rpx
主要使用到原生组件map和cover-view

实现效果：

代码我是使用的mpvue开发。源码如下：

<template>
  <div class="map-clock">
    <map id="map" longitude="113.324520" latitude="23.099994" scale="14" :markers="markers" :polyline="polyline" show-location></map>
    <cover-view class="controls">
      <cover-view>
        地图控件
      </cover-view>
    </cover-view>
    <footer class="ac-footer">
      <div class="aui-footer-btn aui-order-price">
        <span class="aui-order-price-text">
          <span>打卡次数 </span>
          <span class="de-price">500</span>
        </span>
      </div>
      <a href="javascript:;" class="aui-footer-btn">坐标打卡</a>
    </footer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      markers: [{
        iconPath: "../../static/images/map/marker.png",
        id: 0,
        latitude: 23.099994,
        longitude: 113.324520,
        width: 50,
        height: 50
      }],
      polyline: [{
        points: [{
          longitude: 113.3245211,
          latitude: 23.10229
        }, {
          longitude: 113.324520,
          latitude: 23.21229
        }],
        color: "#FF0000DD",
        width: 2,
        dottedLine: true
      }]
    }
  },
}
</script>

<style lang="less" scoped>
.map-clock {
  width: 100%;
  height: calc(100vh - 90rpx);
  position: relative;
  #map {
    width: 100%;
    height: 100%;
  }

  // 底部按钮
  .ac-footer {
    width: 100%;
    position: relative;
    z-index: 102;
    display: flex;
    align-items: center;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 -2px 15px #dedede;
    height: 90rpx;

    .aui-footer-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      background: #4499ff;
      height: 100%;
      font-size: 14px;
      font-weight: bold;
      .de-price {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .aui-order-price {
      background: #fff;
      color: #4499ff;
      position: relative;
    }
  }
}
.controls {
  position: absolute;
  top: 30rpx;
  left: 30rpx;
  height: 50px;
  background: #4499ff;
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  box-shadow: 0 -2px 15px #dedede;
  font-size: 12px;
}
</style>