微信小程序使用地图层级过高引起的问题以及解决思路

• 微信小程序嵌入map地图，由于地图层级过高，使用弹窗组件无法显示在map组件之上
• 官网推荐使用cover-view
• 使用cover-view的限制比较多，可能导致我们踩坑，请仔细阅读微信官方文档：

cover-view | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html我做的项目的需求是：点击地图上面的mark点展示一个弹窗，弹窗有过渡动画

由于没有仔细阅读文档，导致弹窗显示效果没有过渡动画，内部子元素显示不出来，最终花了几个小时的时间才调试成功，所以想把这个问题记录一下，希望对遇到此问题的小伙伴有所帮助

 <template>
 <!--地图容器-->
      <map
        id="myMap"
        :markers="markers"
        style="width: 100%; height: 90%"
        longitude="118.790909"
        latitude="32.019494"
        scale="15"
        rotate="-20"
        :enable-poi="true"
        :enable-3D="true"
        show-location
        @markertap="handlemarkertap"
      >
        <!-- 地图弹窗 -->
        <cover-view :class="['cover-view', visible ? 'animate-show' : '']">
          test
        </cover-view>
      </map>
</templete>
<script>
export default {
 methods: {
    handlemarkertap(e) {
      console.log('点击标记点的时候触发', e)
      this.visible = false

      let id = e.detail.markerId
      let obj = this.markers.find((item) => item.id === id)
      this.modalData = { ...obj }
      // this.$toast('点击了' + obj.title)
      if (this.timer) {
        clearTimeout(this.timer)
      }
      this.timer = setTimeout(() => {
        this.visible = true
      }, 300)
    }
 }
 }
 </script>
// 主要样式
.cover-view {
  position: absolute;
  bottom: 5%;
  left: 50%;
  width: 80%;
  height: 25%;
  background-color: rgb(253, 250, 250);
  border-radius: 20rpx;
  padding: 20rpx;
  transition: all 0.3s;
  transform: translate(-50%, 200%);
  &.animate-show {
    transform: translate(-50%, 0%);
  }
}

最终demo效果：