uniapp的map组件层级过高 覆盖弹窗

提示：map组件的层级是所有组件最高的，用z-index没用

map组件层级太高，怎么调都没有，开始我想了个办法，设置高度，另一个组件显示时，map组件就display掉，这个也可行，但是现在的需求是，需要在地图上弹出弹窗，只能用cover-view

直接上代码

<map class="map" :latitude="latitude" :longitude="longitude" :markers="markers" :circles="circles"
			:scale="scale" v-if="mapIsHidden">
			<cover-view id="olMap" class="olMap"></cover-view>
			<cover-view class="customCallout" marker-id="" v-if="isCover">
				<cover-image class="customImg" src="../../static/img/close.png" @click="closeCover"></cover-image>
				<cover-view class="content">{{name}}</cover-view>
				<cover-view>hjklashfklhasfklhaskjhbnljkasdbhklj</cover-view>
			</cover-view>
</map>

<style lang="scss">
	@import 'ol/ol.css';

	uni-page-body,
	.index {
		height: 100%;
	}

	.map {
		width: 100%;
		height: calc(100vh - 170rpx);
		// position:relative;
	}

	u-tabs {
		height: 20%;
	}

	.customCallout {
		width: 700rpx;
		height: 300rpx;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		margin: 550px auto;
		box-sizing: border-box;
		background-color: #fff;
		box-shadow: 0px 4rpx 16px 0px rgba(189, 191, 193, 0.4);
		border-radius: 20rpx;
		display: inline-flex;
		text-align: center;
		// padding: 24rpx;
		justify-content: center;
		align-items: center;
		color: #2A7BE2;
	}

	.customImg {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 16rpx;
		right: 16rpx;
	}
</style>

<script>
	import Map from 'ol/Map';
	import OSM from 'ol/source/OSM';
	import TileLayer from 'ol/layer/Tile';
	import View from 'ol/View';
	import TileWMS from 'ol/source/TileWMS';

	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 27.24,
				longitude: 111.47,
				scale: 15,
				markers: [],
				circles: [{ //在地图上显示圆
					latitude: "111.47429386070402",
					longitude: "27.218289925719",
					fillColor: "#D9E6EF", //填充颜色
					color: "#A7B6CB", //描边的颜色
					radius: 50, //半径
					strokeWidth: 2 //描边的宽度
				}],
				// map:null,
				isCover: false,
				name: "capper made in future"
			}
		},
		onLoad() {
			
		},
		methods: {
			// 获取地理位置
			getLocationInfo(e) {
				this.latitude = e[1];
				this.longitude = e[0];
				this.scale = 17;
				this.markers = [{
						id: 0,
						latitude: e[1], //纬度
						longitude: e[0], //经度
						iconPath: '', //显示的图标        
						rotate: 0, // 旋转度数
						width: 20, //宽
						height: 30, //高
						// title:'我在这里',//标注点名
						alpha: 0.5, //透明度
						callout: { //自定义标记点上方的气泡窗口 点击有效  
							content: e[2], //文本
							color: '#ffffff', //文字颜色
							fontSize: 16, //文本大小
							borderRadius: 20, //边框圆角
							borderWidth: '20',
							padding: 20,
							bgColor: '#e51860', //背景颜色
							display: 'ALWAYS', //常显
						},
					},

				]
				this.circles = [{ //在地图上显示圆
					latitude: e[1],
					longitude: e[0],
					fillColor: "#D9E6EF6A", //填充颜色
					color: "#A7B6CB", //描边的颜色
					radius: 50, //半径
					strokeWidth: 5 //描边的宽度
				}]
				// 构造官方卫星、路网图层
				this.name = e[2];
			},

			

		},
		mounted() {
		

		}
	}
</script>

---

总结

有什么问题欢迎大家提~

目前在map组件上叠加openlayers图层还没琢磨出来，欢迎大佬指导~