需求:点击当前经纬度跳转到地图页面,点击地图任意位置拿到当前位置的经纬度并返回
<view class="amap-container">
<map id="popMap" class="maps" :latitude="latitude" :longitude="longitude" :markers="covers"></map>
</view>
data() {
return {
covers: [], //标记数组
latitude: '', //纬度
longitude: '', //经度
location:'' //当期位置
}
},
在onload生命周期拿到上个页面传过来的经纬度
onLoad(option) {
this.location = option.currentLocation
this.longitude =this.location.split(',')[0]
this.latitude = this.location.split(',')[1]
//页面刚加载时定义标记点,id为第一个标记点的时候是1,将上个页面传过来的经纬度作为默认标记点用图片图标标记,图片的引入方式:
import img from '@/static/home/location.png'
this.covers = [{
id: 1,
latitude: this.latitude,
longitude: this.longitude,
iconPath: img,
fontSize: 120,
title: "所选位置"
}]
},
定义地图的点击事件:
addMapEvent() {
let that = this;
var maps = uni.createMapContext("popMap", this).$getAppMap();
maps.onclick = function(point) {
that.longitude = point.longitude
that.latitude = point.latitude
that.covers = [];
that.covers = [{
id: 2, //点击时候是第二次作为标记点定义。id为2,不能重复
latitude: point.latitude,
longitude: point.longitude,
iconPath: img,
fontSize: 80, //一般要定义大小要不出不来图片
title: "所选位置"
}]
let pages = getCurrentPages()
let prevPage = pages[pages.length - 2]
let currentLocat = that.longitude + ',' + that.latitude
prevPage.$vm.getMapValue(currentLocat)
setTimeout(res=>{
uni.navigateBack({
delta: 1 // 返回的页面数
})
},1000)
}
},
addMapEvent的调用在mounted生命周期调用:
mounted() {
this.addMapEvent()
},