cover-view.uvue

<template>
	<view>
		<page-head title="cover-view用于覆盖map、video等原生组件"></page-head>
    <view class="uni-padding-wrap uni-common-mb">
      <text class="uni-subtitle-text">注意：需要正确配置地图服务商的Key才能正常显示地图组件</text>
    </view>
		<view class="cover-content">
			<map :latitude="latitude" :longitude="longitude"></map>
			<cover-view class="cover-view">简单的cover-view</cover-view>
			<cover-image class="cover-image" src="/static/uni.png"></cover-image>
		</view>
	</view>
</template>

<script lang="uts">
	export default {
		data() {
			return {
				showMap: false,
        latitude: 39.909,
        longitude: 116.39742
			};
		},
		onLoad() {
      this.showMap = true
		}
	}
</script>

<style>
	map {
		width: 100%;
		height: 600px;
	}

	.cover-content {
		position: relative;
	}

	.cover-view {
		position: absolute;
		left: 5px;
		top: 5px;
		width: 375rpx;
		text-align: center;
		background-color: #DDDDDD;
	}

	.cover-image {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 96px;
		height: 96px;
	}

  .tips {
    font-size: 12px;
    margin-top: 15px;
    opacity: .8;
  }
</style>