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>