前言
本教程是基于 “apifm-wxapi” 模块,教你快速实现小程序开发,所以你可能需要先了解以下知识点:
功能说明
- 知道坐标,可以查询该坐标的地址
- 给定两个坐标,可以计算两点之间的距离(公里 / km)
特别说明
本案例中,使用到了微信小程序的2个官方接口:
1wx.getLocation() 2wx.chooseLocation()
为了保护用户隐私,微信有规定,必须要告诉用户使用定位的业务用途,以便帮助用户决策是否要允许小程序读取 TA 的定位信息:
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission
所以,根据微信小程序官方的说明,本案例在 app.json 文件中加入了使用场景说明:
1"permission": { 2 "scope.userLocation": { 3 "desc": "微信规定必须要说明定位用途" 4 } 5 }
wxml代码
1<button type="primary" bindtap="queryAddress"> 读取当前地址坐标并查询地址 </button> 2<button type="warn" bindtap="selAddress"> 选地址计算距离 </button>
js代码
1const WXAPI = require('apifm-wxapi') 2 3Page({ 4 5 data: { 6 latitude: undefined, 7 longitude: undefined 8 }, 9 onLoad: function (options) { 10 11 }, 12 onShow: function () { 13 14 }, 15 queryAddress(){ // 读取当前定位坐标 16 const _this = this 17 wx.getLocation({ 18 type: 'wgs84', 19 success(res) { 20 console.log(res) 21 _this.setData(res) 22 _this.mapQQAddress(res) 23 } 24 }) 25 }, 26 mapQQAddress(e){ // 坐标查地址 27 const location = e.latitude + ',' + e.longitude 28 WXAPI.mapQQAddress(location, 1).then(res => { 29 console.log('地址查看:', res) 30 if (res.code == 0) { 31 wx.showModal({ 32 title: '成功', 33 content: res.data.result.address, 34 showCancel: false 35 }) 36 } 37 }) 38 }, 39 selAddress(){ // 选择一个地址,读取坐标后计算距离 40 const _this = this 41 if (!this.data.latitude || !this.data.longitude) { 42 wx.showToast({ 43 title: '请先读取当前地址', 44 icon: 'none' 45 }) 46 return 47 } 48 wx.chooseLocation({ 49 success: (e) => { 50 console.log(e) 51 WXAPI.mapDistance(_this.data.latitude, _this.data.longitude, e.latitude, e.longitude).then(res => { 52 console.log(res) 53 if (res.code == 0) { 54 wx.showModal({ 55 title: '成功', 56 content: '距离:' + res.data + '公里', 57 showCancel: false 58 }) 59 } 60 }) 61 } 62 }) 63 } 64})
总结
本案例主要使用了 apifm-wxapi 的以下方法:
1WXAPI.mapDistance(lat1, lng1, lat2, lng2) 2WXAPI.mapQQAddress(location, coord_type)
coord_type 参数:
1 GPS坐标 2 sogou经纬度 3 baidu经纬度 4 mapbar经纬度 5 [默认]腾讯、google、高德坐标 6 sogou墨卡托
关于 apifm-wxapi 更多的使用方法:
本案例Demo代码下载:
期待你的进步!
感谢!