微信小程序——计算2点之间的距离

本是古典何须时尚 2022-10-08 11:17 233阅读 0赞

关于计算2点之间的距离都依赖了腾讯地图，所以请先在[腾讯地图官网][Link 1]申请key。具体流程看下图：

![160cbf7a88cbb7278022074cb2ba3f1e.png][]

下面具体讲计算2点之间距离的方法。

### 方法一： ###

1.通过 [wx.getLocation(Object object)][wx.getLocation_Object object]  获取用户当前的经度，纬度:

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

getPosition: function () {
        var that = this;
        wx.getLocation({
          success: function (res) {
            that.setData({
              fromLng: res.longitude,
              fromLat: res.latitude
            })
          }
        })
      },

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

2.通过[ 腾讯地图 逆解析][Link 2] 你的目的地地址，获取经度，纬度：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

3.定义 计算距离的 方法：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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;
    }

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

4.调用该方法：

getDistance(fromLng,fromLat,toLat,toLng)

我需要同时计算多条数据的距离，我发现在遍历返回目的地经纬度的时候，它返回来的结果并不是按照你列表的顺序返回来的，而且有些地址还解析不出来。

不知道是我的写法有问题，还是接口调用的问题。如果哪位大神看到网上有这种示例，麻烦提供一下链接给我，借鉴学习一下~后面我采取的是下面这种方法：

### 方法二：通过腾讯地图的距离计算接口 ###

1.跟方法一第1步一样，获取用户的接口权限；

2.把 qqmap-wx-jssdk.min.js 加到你小程序；

3.在需要计算距离的js页面引用 qmap-wx-jssdk.min.js ，并实例化该对象：

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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'
        });
      },

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

4.先逆解析目的地，再调用[计算距离][Link 3]的接口

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

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);
            }
          });
        }
      }
    })

![复制代码][48304ba5e6f9fe08f3fa1abda7d326ab.png]

注意腾讯地图的请求限制：

![6657661512283b80b2306690b02cc7d4.png][]

分类: [小程序][Link 4]

[Link 1]: https://lbs.qq.com/index.html
[160cbf7a88cbb7278022074cb2ba3f1e.png]: /images/20221005/e1b42d5e004f4cc48588e05104a9546e.png
[wx.getLocation_Object object]: https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
[48304ba5e6f9fe08f3fa1abda7d326ab.png]: /images/20221005/13a7d047c9a2402192a1f75057f43e49.png
[Link 2]: https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
[Link 3]: https://lbs.qq.com/qqmap_wx_jssdk/method-calculatedistance.html
[6657661512283b80b2306690b02cc7d4.png]: /images/20221005/ce7716351181478692a3c4badf6c478a.png
[Link 4]: https://www.cnblogs.com/sese/category/1243189.html