uniapp中使用弹出层后，控制高德地图显隐

在uniapp中或者在微信小程序中，map、video等组件的优先级特别高，且无法使用z-index来控制弹出层覆盖这些组件，所以需要使用view组件的hidden属性控制map组件的显隐

一、获取高德地图key

在高德地图官网上创建应用并选择api的类型生成相应的key，以下是官方链接

高德地图key

如果不知道如何生成地图的key，以下链接是生成方法

如何生成地图key

二、下载高德地图的微信小程序sdk

这是微信小程序sdk下载地址

下载地址

三、定义template模板

<template>
	<!-- 日期选择 -->
	<view class="time_choose">
		<view class="left" @click="jumpDate(-1)">
			<text class="iconfont icon-weibiaoti34"></text>
			<text>前一天</text>
		</view>
		<view class="center">
			<text style="margin-right: 10rpx;" @click="openDateModal">{{initialDate}}</text>
			<text class="iconfont icon-xiala2" @click="openDateModal"></text>
			<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
		</view>
		<view class="right" @click="jumpDate(1)">
			<text>后一天</text>
			<text class="iconfont icon-weibiaoti34"></text>
		</view>
	</view>
	<view :hidden='visible'>
		<map style="width: 750rpx; height: 100vh;" :latitude="latitude" 
			:longitude="longitude" scale="12" :markers="markers">
		</map>
	</view>
</template>

四、定义data样式及相关方法

<script>
	import amap from '@/gaodemap_sdk/amap-wx.js'   //先引入sdk的js文件
	export default {
		data() {
			return {
				navTitle:'地图轨迹',
				// 地图
				amapPlugin:null,
				// 小程序高德地图key
				key:'xxxxxxxxxxxx',
				// 图标点
				markers: [{
				  iconPath: "/static/imgs/location.png",
				  id: 0,
				  latitude: 40.05308742349665,
				  longitude: 116.30196322415159,
				  width: 23,
				  height: 33
				},{
				  iconPath: "/static/imgs/location.png",
				  id: 0,
				  latitude: 40.0616231231,
				  longitude: 116.534446000,
				  width: 24,
				  height: 34
				}],
				// 中心点
				latitude: 40.05308742349665,
				longitude: 116.30196322415159,
				// 日历数据
				show: false,
				visible:false,   //控制地图显隐
				mode: 'date',
				initialDate:'2020-11-01',  //日期组件初始时间
				start_time:'',  //获取轨迹的开始时间
				end_time:''  //获取轨迹的结束时间
			}
		},
		onLoad(options) {
			// 显示地图
			this.amapPlugin = new amap.AMapWX({
				key:this.key
			})		
		},
		methods: {
			// 日期选择
			change(e) {
				this.initialDate = e.result
				this.start_time = this.initialDate + ' 00:00:00'
				this.visible = false
			},
			// 打开日期框
			openDateModal(){
				this.show = true
				this.visible = true
			},
		}，
		// 监听日期弹出框的改变，从而改变map的显隐
		watch:{
			show(val){
				if(val==false){
					this.visible = false
				}
			}
		}
	}
</script>

五、相关样式

<style lang="less">
	#map_track{
		.time_choose{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			margin-bottom: 20rpx;
			.left{
				color: #0c73fe;
				.iconfont{
					display: inline-block;
					transform: rotate(180deg);
					margin-right: 10rpx;
				}
			}
			.right{
				color: #0c73fe;
				.iconfont{
					margin-left: 10rpx;
				}
			}
		}
	}
</style>

本文地址：https://blog.csdn.net/qq_43958325/article/details/110238470