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

关于计算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);
        }
      });
    }
  }
})

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

原文地址:https://www.cnblogs.com/sese/p/9865851.html