- 微信小程序嵌入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效果: