uniapp使用map组件点击地图获取经纬度

需求:点击当前经纬度跳转到地图页面,点击地图任意位置拿到当前位置的经纬度并返回

<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()
},

猜你喜欢

转载自blog.csdn.net/weixin_43877575/article/details/127868222