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中使用弹出层后,控制高德地图显隐
在uniapp中或者在微信小程序中,map、video等组件的优先级特别高,且无法使用z-index来控制弹出层覆盖这些组件,所以需要使用view组件的hidden属性控制map组件的显隐
一、获取高德地图key
在高德地图官网上创建应用并选择api的类型生成相应的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