小程序實操,距離計算總結。html
一共有兩種方法,各有利弊:git
1.利用小程序的wx.getLocation 方法獲得用戶的經緯度,而後用已知的商家的經緯進行計算;web
2.利用騰訊地圖位置服務calculateDistance直接計算;小程序
先熟悉下兩個單詞:segmentfault
longitude:經度;api
latitude:緯度;app
下邊是兩種方法的具體實現ide
1.小程序提供了獲取用戶位置信息的api,因此咱們能直接獲取到經緯度;ui
2.在騰訊位置服務座標拾取器,獲取商家的具體經緯度(例:北京故宮博物院116.397027(經度),39.917990(緯度));this
3.利用公式進行兩點的經緯度計算,需注意:小程序默認座標系是wgs84,您需設置爲gcj02再試;
代碼:
Page({ data:{ }, onLoad: function() { var _this = this; _this.findXy() //查詢用戶與商家的距離 }, findXy() { //獲取用戶的經緯度 var _this = this wx.getLocation({ type: 'gcj02', success(res) { _this.getDistance(res.latitude, res.longitude, 39.917990,116.397027) } }) }, Rad: function(d) { //根據經緯度判斷距離 return d * Math.PI / 180.0; }, getDistance: function(lat1, lng1, lat2, lng2) { // lat1用戶的緯度 // lng1用戶的經度 // lat2商家的緯度 // lng2商家的經度 var radLat1 = this.Rad(lat1); var radLat2 = this.Rad(lat2); var a = radLat1 - radLat2; var b = this.Rad(lng1) - this.Rad(lng2); var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2))); s = s * 6378.137; s = Math.round(s * 10000) / 10000; s = s.toFixed(2) + '千米' //保留兩位小數 console.log('經緯度計算的距離:' + s) return s } )}
一、先到騰訊位置服務註冊登陸,申請key、引入依賴。
下圖的第三步配置是要在小程序的後臺那裏設置,記得不要找錯地方了。如圖:
二、配置完成了以後,小程序從新編譯一下
三、求兩點距離文檔:騰訊位置-兩點求距
四、讀完可知,咱們只須要商家的經緯度便可,咱們在小程序裏實驗一下
// 引入SDK核心類 var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); Page({ onLoad: function() { var _this = this; _this.findShop() //查詢用戶與商家的距離 }, findShop() { //拿到商家的地理位置,用到了騰訊地圖的api // 實例化API核心類 var _that = this var demo = new QQMapWX({ key: '你申請到的key' // 必填 }); // 調用接口 demo.calculateDistance({ to: [{ latitude: 39.917990, //商家的緯度 longitude: 116.397027, //商家的經度 }], success: function(res) { let hw = res.result.elements[0].distance //拿到距離(米) if (hw && hw !== -1) { //拿到正確的值 //轉換成千米 hw = (hw / 2 / 500).toFixed(2) + '千米' } else { hw = "距離太近或請刷新重試" } console.log('騰訊地圖計算距離商家' + hw); } }); } })
可能會出現的錯誤:
{status:199,message:'此key未開啓webservice功能'}
此時須要打開騰訊位置服務-key配置,設置一下剛纔申請key的詳情頁面,把下列選項所有勾上,把你小程序的appid也寫上,webservice域名白名單設置爲空便可。
保存完,從新編譯再試
做者:大師兄連接:https://segmentfault.com/a/11...
來源:SegmentFault
著做權歸做者全部。商業轉載請聯繫做者得到受權,非商業轉載請註明出處。