目錄

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

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

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

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

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

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

7.運(yùn)行效果

8.完整代碼

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

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

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

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

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

我們通過wx.getLocation這個(gè)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. 請(qǐng)求接口拿到返回經(jīng)緯

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

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

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

?list數(shù)據(jù)格式如下：?

 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)緯度通常以字符串的形式存儲(chǔ)，在進(jìn)行距離計(jì)算等數(shù)值操作時(shí)，需要將其轉(zhuǎn)換為數(shù)值類型進(jìn)行計(jì)算。通過使用parseFloat()函數(shù)，可以將字符串解析成浮點(diǎn)數(shù)，以便后續(xù)的數(shù)值計(jì)算。?

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

?在每一次打開此頁面的時(shí)候都進(jìn)行一次權(quán)限排查，如果沒有打開定位權(quán)限，則會(huì)調(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 settingswx.openSetting({success(res) {if (res.authSetting['scope.userLocation']) {// User granted location permission in settingsthat.onLoad(); // Reload the page to fetch data with location permission} else {// User did not grant location permission in settingswx.showToast({title: '您還未開啟定位權(quán)限',icon: 'none'});}}});} else if (res.cancel) {console.log(res.cancel);// User canceled opening settingswx.showToast({title: '您還未開啟定位權(quán)限',icon: 'none'});}}});}}});},

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

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

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

  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;：定義地球的半徑，單位為公里。這是用于計(jì)算兩點(diǎn)間距離的基準(zhǔn)。

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

• var dLon = (lon2 - lon1) * Math.PI / 180;：計(jì)算兩點(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公式，計(jì)算兩點(diǎn)間的距離。

  • Math.sin(dLat / 2) * Math.sin(dLat / 2)：計(jì)算緯度差值的一半的正弦平方。
  • Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180)：計(jì)算兩點(diǎn)緯度的余弦乘積。
  • Math.sin(dLon / 2) * Math.sin(dLon / 2)：計(jì)算經(jīng)度差值的一半的正弦平方。
  • 將上述三個(gè)部分相加得到a的值，表示兩點(diǎn)間的角距離。

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

  • Math.sqrt(a)：計(jì)算a的平方根。
  • Math.sqrt(1 - a)：計(jì)算1 - a的平方根。
  • Math.atan2()：計(jì)算給定坐標(biāo)的反正切值。

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

• return distance.toFixed(2);：返回計(jì)算得到的距離，并將其保留兩位小數(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)聽用戶下拉動(dòng)作*/onPullDownRefresh() {},/*** 頁面上拉觸底事件的處理函數(shù)*/onReachBottom() {},/*** 用戶點(diǎn)擊右上角分享*/onShareAppMessage() {}
})

微信小程序如何利用接口返回經(jīng)緯計(jì)算實(shí)際位置并且進(jìn)行導(dǎo)航功能【下】
https://blog.csdn.net/m0_71966801/article/details/134084525?spm=1001.2014.3001.5502?