微信小程序如何使用地球半徑計算兩組經(jīng)緯度點(diǎn)之間的距離（自身位置與接口返回位置）【上】

這篇具有很好參考價值的文章主要介紹了微信小程序如何使用地球半徑計算兩組經(jīng)緯度點(diǎn)之間的距離（自身位置與接口返回位置）【上】。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

微信小程序如何使用地球半徑計算兩組經(jīng)緯度點(diǎn)之間的距離（自身位置與接口返回位置）【上】,微信小程序,apache,小程序,前端,微信公眾平臺,微信開放平臺

1.配置位置權(quán)限?

2.獲取當(dāng)前自身經(jīng)緯度?

3. 請求接口拿到返回經(jīng)緯

4. 循環(huán)取每一項(xiàng)的經(jīng)緯

5.如何判斷是否打開了定位權(quán)限?

6.進(jìn)行距離計算操作?

7.運(yùn)行效果

8.完整代碼

首先在使用小程序時，請求的接口一定要去配置合法域名，才能夠進(jìn)行接下來的操作。?

1.配置位置權(quán)限?

在app.json中添加如下代碼：

 "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息將用于小程序位置接口的效果展示"
    },
  }

2.獲取當(dāng)前自身經(jīng)緯度?

我們通過wx.getLocation這個api進(jìn)行獲?。?

 wx.getLocation({
      type: 'gcj02',
      success(res) {
        that.setData({
          currentLatitude: res.latitude,
          currentLongitude: res.longitude
        });
})

在這里我們使用了變量來存放當(dāng)前經(jīng)緯度，并且使用that.setData({})方法來賦值，因?yàn)閠his的指向可能不明確，配置如下：

 data: {
      currentLatitude:'',
      currentLongitude:'',
}

  onLoad(options) {
    let that = this;
}

除了gcj02，還有以下幾種地理位置坐標(biāo)系類型可以選擇：

wgs84：表示使用WGS84坐標(biāo)系，也是全球衛(wèi)星定位系統(tǒng)（GPS）所采用的坐標(biāo)系。

bd09：表示使用百度坐標(biāo)系，在國內(nèi)常用的一種坐標(biāo)系，適用于百度地圖。

bd09ll：表示使用百度經(jīng)緯度坐標(biāo)系，與bd09相似，但在經(jīng)度上更接近真實(shí)的經(jīng)度值。

3. 請求接口拿到返回經(jīng)緯

wx.request({
          url: '自己所使用的接口',
          method: 'POST',
          data: {},
          success: function(res) {
            console.log(res);
            that.setData({
              list: res.data.data.list
            });
}
})

上述代碼呢list是我在data中的一個變量，用來存放我包含經(jīng)緯度數(shù)據(jù)的數(shù)組，聲明方式為list：[]

4. 循環(huán)取每一項(xiàng)的經(jīng)緯

?list數(shù)據(jù)格式如下：微信小程序如何使用地球半徑計算兩組經(jīng)緯度點(diǎn)之間的距離（自身位置與接口返回位置）【上】,微信小程序,apache,小程序,前端,微信公眾平臺,微信開放平臺 ?

 for (let i = 0; i < that.data.list.length; i++) {
              let item = that.data.list[i];
              let lat = parseFloat(item.latitude);
              let lon = parseFloat(item.longitude);
            }
            that.setData({
              list: that.data.list
            });

將item.latitude和item.longitude轉(zhuǎn)換為浮點(diǎn)數(shù)（parseFloat()）的目的是將字符串轉(zhuǎn)換為數(shù)值型數(shù)據(jù)。這是因?yàn)榻?jīng)緯度通常以字符串的形式存儲，在進(jìn)行距離計算等數(shù)值操作時，需要將其轉(zhuǎn)換為數(shù)值類型進(jìn)行計算。通過使用parseFloat()函數(shù)，可以將字符串解析成浮點(diǎn)數(shù)，以便后續(xù)的數(shù)值計算。?

5.如何判斷是否打開了定位權(quán)限?

?在每一次打開此頁面的時候都進(jìn)行一次權(quán)限排查，如果沒有打開定位權(quán)限，則會調(diào)起設(shè)置打開權(quán)限

checkLocationPermission() {
    let that = this;
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.userLocation']) {
          wx.showModal({
            title: '提示',
            content: '您還沒有啟用定位權(quán)限，是否前往設(shè)置開啟？',
            success(res) {
              if (res.confirm) {
                // User confirmed opening settings
                wx.openSetting({
                  success(res) {
                    if (res.authSetting['scope.userLocation']) {
                      // User granted location permission in settings
                      that.onLoad(); // Reload the page to fetch data with location permission
                    } else {
                      // User did not grant location permission in settings
                      wx.showToast({
                        title: '您還未開啟定位權(quán)限',
                        icon: 'none'
                      });
                    }
                  }
                });
              } else if (res.cancel) {
                console.log(res.cancel);
                // User canceled opening settings
                wx.showToast({
                  title: '您還未開啟定位權(quán)限',
                  icon: 'none'
                });
              }
            }
          });
        }
      }
    });
  },

因?yàn)榇舜a是排查權(quán)限信息，所以單獨(dú)寫了個函數(shù)，你可以選擇在onshow或者onload中調(diào)用

  onShow() {
    this.checkLocationPermission();
  },

6.進(jìn)行距離計算操作?

  getDistance: function(lat1, lon1, lat2, lon2) {
    var R = 6371;
    var dLat = (lat2 - lat1) * Math.PI / 180;
    var dLon = (lon2 - lon1) * Math.PI / 180;
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var distance = R * c; 
    return distance.toFixed(2);
  },

詳解代碼：

var R = 6371;：定義地球的半徑，單位為公里。這是用于計算兩點(diǎn)間距離的基準(zhǔn)。

var dLat = (lat2 - lat1) * Math.PI / 180;：計算兩點(diǎn)緯度差值，并將其轉(zhuǎn)換為弧度值。

var dLon = (lon2 - lon1) * Math.PI / 180;：計算兩點(diǎn)經(jīng)度差值，并將其轉(zhuǎn)換為弧度值。

var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) * Math.sin(dLon / 2) * Math.sin(dLon / 2);：根據(jù)Haversine公式，計算兩點(diǎn)間的距離。

Math.sin(dLat / 2) * Math.sin(dLat / 2)：計算緯度差值的一半的正弦平方。

Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180)：計算兩點(diǎn)緯度的余弦乘積。

Math.sin(dLon / 2) * Math.sin(dLon / 2)：計算經(jīng)度差值的一半的正弦平方。

將上述三個部分相加得到a的值，表示兩點(diǎn)間的角距離。

var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));：根據(jù)球面三角學(xué)公式，計算角距離對應(yīng)的弧長。

Math.sqrt(a)：計算a的平方根。

Math.sqrt(1 - a)：計算1 - a的平方根。

Math.atan2()：計算給定坐標(biāo)的反正切值。

var distance = R * c;：將弧長乘以地球半徑，得到兩點(diǎn)間的直線距離，單位為公里。

return distance.toFixed(2);：返回計算得到的距離，并將其保留兩位小數(shù)。

?最后需要調(diào)用函數(shù)到接口操作中（上述的for循環(huán)）：

for (let i = 0; i < that.data.list.length; i++) {
              let item = that.data.list[i];
              let lat = parseFloat(item.latitude);
              let lon = parseFloat(item.longitude);
              let distance = that.getDistance(that.data.currentLatitude, that.data.currentLongitude, lat, lon);
              item.distance = distance;
            }
            that.setData({
              list: that.data.list
            });

7.運(yùn)行效果

8.完整代碼

Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
      list:[],
      currentLatitude:'',
      currentLongitude:'',
     
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  handleImageError(e){
  onLoad(options) {
    let that = this;
    wx.getLocation({
      type: 'gcj02',
      success(res) {
        that.setData({
          currentLatitude: res.latitude,
          currentLongitude: res.longitude
        });
        
        wx.request({
          url: '',
          method: 'POST',
          data: {},
          success: function(res) {
            console.log(res);
            that.setData({
              list: res.data.data.list
            });
            
            for (let i = 0; i < that.data.list.length; i++) {
              let item = that.data.list[i];
              let lat = parseFloat(item.latitude);
              let lon = parseFloat(item.longitude);
              let distance = that.getDistance(that.data.currentLatitude, that.data.currentLongitude, lat, lon);
              item.distance = distance;
            }
            that.setData({
              list: that.data.list
            });
          },
        });
      },
      fail(res) {
        wx.showModal({
          title: '提示',
          content: '您還沒有啟用定位權(quán)限，是否前往設(shè)置開啟？',
          success(res) {
            if (res.confirm) {
              wx.openSetting({
                success(res) {
                  if (res.authSetting['scope.userLocation']) {
                    that.onLoad(options); 
                  } else {
                    wx.showToast({
                      title: '您還未開啟定位權(quán)限',
                      icon: 'none'
                    });
                  }
                }
              });
            } else if (res.cancel) {
              console.log(res.cancel);
              wx.showToast({
                title: '您還未開啟定位權(quán)限',
                icon: 'none'
              });
            }
          }
        });
      }
    });
  },
  
  onShow() {
    this.checkLocationPermission();
  },
  
  checkLocationPermission() {
    let that = this;
    wx.getSetting({
      success(res) {
        if (!res.authSetting['scope.userLocation']) {
          wx.showModal({
            title: '提示',
            content: '您還沒有啟用定位權(quán)限，是否前往設(shè)置開啟？',
            success(res) {
              if (res.confirm) {
                wx.openSetting({
                  success(res) {
                    if (res.authSetting['scope.userLocation']) {
                      that.onLoad(); 
                    } else {
                      wx.showToast({
                        title: '您還未開啟定位權(quán)限',
                        icon: 'none'
                      });
                    }
                  }
                });
              } else if (res.cancel) {
                console.log(res.cancel);
                wx.showToast({
                  title: '您還未開啟定位權(quán)限',
                  icon: 'none'
                });
              }
            }
          });
        }
      }
    });
  },
  
  getDistance: function(lat1, lon1, lat2, lon2) {
    var R = 6371; 
    var dLat = (lat2 - lat1) * Math.PI / 180;
    var dLon = (lon2 - lon1) * Math.PI / 180;
    var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var distance = R * c;
    return distance.toFixed(2);
  },
  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  

  onReady() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload() {

  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh() {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  onReachBottom() {

  },

  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage() {

  }
})

微信小程序如何利用接口返回經(jīng)緯計算實(shí)際位置并且進(jìn)行導(dǎo)航功能【下】
https://blog.csdn.net/m0_71966801/article/details/134084525?spm=1001.2014.3001.5502?文章來源地址http://www.zghlxwxcb.cn/news/detail-739256.html

到了這里，關(guān)于微信小程序如何使用地球半徑計算兩組經(jīng)緯度點(diǎn)之間的距離（自身位置與接口返回位置）【上】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！