uniapp中使用彈出層後，控制高德地圖顯隐

• 一、擷取高德地圖key
• 二、下載下傳高德地圖的微信小程式sdk
• 三、定義template模闆
• 四、定義data樣式及相關方法
• 五、相關樣式

在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 >
	#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>