3分鐘搞定微信小程序類美團用戶商家距離計算

前言

小程序實操,距離計算總結。html

思路

一共有兩種方法,各有利弊:git

1.利用小程序的wx.getLocation 方法獲得用戶的經緯度,而後用已知的商家的經緯進行計算;web

2.利用騰訊地圖位置服務calculateDistance直接計算;小程序

先熟悉下兩個單詞:segmentfault

longitude:經度;api

latitude:緯度;app

下邊是兩種方法的具體實現ide

1、獲取用戶的位置信息,再進行計算(wx.getLocation)

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
    }
    )}

2、利用騰訊地圖的位置服務

一、先到騰訊位置服務註冊登陸,申請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

著做權歸做者全部。商業轉載請聯繫做者得到受權,非商業轉載請註明出處。

相關文章
相關標籤/搜索