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()
},
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值