关于计算2点之间的距离都依赖了腾讯地图,所以请先在腾讯地图官网申请key。具体流程看下图:
下面具体讲计算2点之间距离的方法。
方法一:
1.通过 wx.getLocation(Object object) 获取用户当前的经度,纬度:
getPosition: function () { var that = this; wx.getLocation({ success: function (res) { that.setData({ fromLng: res.longitude, fromLat: res.latitude }) } }) },
2.通过 腾讯地图 逆解析 你的目的地地址,获取经度,纬度:
wx.request({ url: 'https://apis.map.qq.com/ws/geocoder/v1/', data: { "key": "你的腾讯地图 key", "address": "目的地" }, method: 'GET', success: function (res) { if (res.data.result) { const addressLocation = res.data.result.location; const courseLat = addressLocation.lat;//获取目的地的纬度 const courseLng = addressLocation.lng;//获取目的地的经度 } that.setData({ toLat: courseLat, toLng:courseLng }) } })
3.定义 计算距离的 方法:
getDistance: function(lat1, lng1, lat2, lng2) { lat1 = lat1 || 0; lng1 = lng1 || 0; lat2 = lat2 || 0; lng2 = lng2 || 0; var rad1 = lat1 * Math.PI / 180.0; var rad2 = lat2 * Math.PI / 180.0; var a = rad1 - rad2; var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0; var r = 6378137; var distance = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2))); return distance; }
4.调用该方法:
getDistance(fromLng,fromLat,toLat,toLng)
我需要同时计算多条数据的距离,我发现在遍历返回目的地经纬度的时候,它返回来的结果并不是按照你列表的顺序返回来的,而且有些地址还解析不出来。
不知道是我的写法有问题,还是接口调用的问题。如果哪位大神看到网上有这种示例,麻烦提供一下链接给我,借鉴学习一下~后面我采取的是下面这种方法:
方法二:通过腾讯地图的距离计算接口
1.跟方法一第1步一样,获取用户的接口权限;
2.把 qqmap-wx-jssdk.min.js 加到你小程序;
3.在需要计算距离的js页面引用 qmap-wx-jssdk.min.js ,并实例化该对象:
const QQMapWX = require('../../lib/js/qqmap-wx-jssdk.min.js'); var qqmapsdk; onLoad: function (options) { // 实例化API核心类 qqmapsdk = new QQMapWX({ key: 'VBXBZ-YVGRW-2Z4RK-O6H27-WEXUT-3ZB2M' }); },
4.先逆解析目的地,再调用计算距离的接口
wx.request({ url: 'https://apis.map.qq.com/ws/geocoder/v1/', data: { "key": "你的key", "address": "目的地名称" }, method: 'GET', success: function (res) { if (res.data.result) { const addressLocation = res.data.result.location; const courseLat = addressLocation.lat; const courseLng = addressLocation.lng; let destinationDistance; qqmapsdk.calculateDistance({ to: [{ latitude: courseLat, longitude: courseLng }], success: function (res) { destinationDistance = res.result.elements[0].distance; let distanceKm = `${(destinationDistance/1000).toFixed(2)}Km`;//转换成km that.setData({ distance: distanceKm }) }, fail: function (res) { console.log(res); } }); } } })
注意腾讯地图的请求限制: