微信小程式——計算2點之間的距離

weixin_34015860發表於2018-10-28
微信小程式

關於計算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);
        }
      });
    }
  }
})

 

注意騰訊地圖的請求限制：

 

相關文章