欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  互联网

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

程序员文章站 2022-03-11 10:17:58
uniapp中使用弹出层后,控制高德地图显隐一、获取高德地图key二、下载高德地图的微信小程序sdk三、定义template模板四、定义data样式及相关方法五、相关样式在uniapp中或者在微信小程序中,map、video等组件的优先级特别高,且无法使用z-index来控制弹出层覆盖这些组件,所以需要使用view组件的hidden属性控制map组件的显隐一、获取高德地图key在高德地图官网上创建应用并选择api的类型生成相应的key,以下是官方链接高德地图key如果不知道如何生成地图的key,以...

在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