欢迎访问快速建站网站我们提供建站工具系统

获取用户经纬度、用户手动选择地图位置

作者:jcmp      发布时间:2021-04-23      浏览量:0
许多时候,我们需要获取用户位置信息

许多时候,我们需要获取用户位置信息 (例:门店、生鲜配送) 来根据用户具体位置提供服务,此时,我们就需要使用到微信小程序自带的 API 来获取用户经纬度;

开发前准备工作

一、获取用户经纬度 wx.getLocation(Object object)。

定位参数——默认 {{index}} —— {{item}}

/* test.js */Page({ data:{ defaultsPosition: {}, }, onLoad:function(e){ //获取用户位置 wx.getLocation({ type: 'gcj02',//wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 success:(res) =>{ console.log('纬度', res.latitude); console.log('经度', res.longitude); this.setData({ defaultsPosition: res, }); } }); },});

/* test.wxss */.position-data{ box-sizing: border-box; border-radius: 10rpx; width: 690rpx; margin: 30rpx auto; border: 1px solid #eee; padding: 30rpx;}.position-data .title{ padding: 0 30rpx;}.position-data .li{ padding: 0 30rpx; margin: 30rpx auto; font-size: 20rpx; color: #999;}

二、使用 经纬度坐标 解析为 位置文本 并 获取附近poi列表。

如果需要将经纬度坐标转化为具体文本位置,可以调用第三方地图服务商提供的API实现,例如 腾讯地图开放平台 (参考“相关引用3”)。

三、用户手动在地图上选择位置

当默认获取的用户经纬度坐标已不足以满足业务需求时,可以通过让用户手动选择地图上的某个地址,可以通过 wx.chooseLocation(Object ) 来打开 可以选择位置的地图 。

定位参数——默认 {{index}} —— {{item}} 定位参数——用户选择 {{index}} —— {{item}}

/* test.js */Page({ data:{ defaultsPosition: {}, selectPosition: {}, }, onShow:function(e){ wx.getLocation({ type: 'gcj02',//wgs84 返回 gps 坐标,gcj02 返回可用于 wx.openLocation 的坐标 success:(res) =>{ console.log('纬度', res.latitude); console.log('经度', res.longitude); this.setData({ defaultsPosition: res, }); } }); }, //获取位置 getLocation(e) { //携带可能存在的经纬度参数 let defaultsPosition = this.data.defaultsPosition || {}; let selectPosition = this.data.selectPosition || {}; if (!selectPosition.latitude && defaultsPosition.latitude){ selectPosition = this.data.defaultsPosition; } //打开地图选择器 wx.chooseLocation({ latitude: selectPosition.latitude ? selectPosition.latitude: undefined, longitude: selectPosition.longitude ? selectPosition.longitude : undefined, success: (res)=>{ console.log('选择地址回调',res); this.setData({ selectPosition: res, }) } }) },});

演示结果截图 1、未选择地址之前:

wx.chooseLocation({})

success()

相关引用