關(guān)于微信小程序中使用wx.getLocation獲取當前詳細位置并計算距離

更新時間：2023年04月25日 10:25:33 作者：C_心欲無痕

這篇文章主要介紹了關(guān)于微信小程序中使用wx.getLocation獲取當前詳細位置并計算距離,wx.getLocation只能夠獲取經(jīng)緯度，不能夠拿到詳細地址,這里使用騰訊地圖的api,需要的朋友可以參考下

前言

wx.getLocation只能夠獲取經(jīng)緯度，不能夠拿到詳細地址；如果你的項目剛好也使用騰訊地圖的api，那么可以通過騰訊地圖的逆解析就能拿到詳細地址了；

1，wx.getLocation()

先介紹一下wx.getLocation（）方法的使用；此方法可以獲取當前的經(jīng)緯度和速度、高度；官網(wǎng)鏈接

想要使用這個方法，先需要在小程序后臺 《開發(fā)管理-接口設(shè)置》中開通接口權(quán)限，需要審核通過才能使用：

在這里插入圖片描述

注意：自 2022 年 7 月 14 日后發(fā)布的小程序，若使用該接口，需要在 app.json 中進行聲明，否則將無法正常使用該接口；如下： app.json

 "requiredPrivateInfos": ["getLocation", "chooseLocation", "chooseAddress"],

開始使用：

wx.getLocation({
    type: 'gcj02', // 比較精確
    success: (res) => {
     console.log(res);
    }
  })

那么此接口只能獲取到當前的經(jīng)緯度并不是當前的省市區(qū)街道等地址；下面我們會配合使用騰訊地圖的api進行地址的逆解析獲取詳細地址；

2，獲取詳細地址

第一步：在騰訊位置服務(wù)注冊獲取key或公司里面已經(jīng)獲取過key：騰訊地圖官方鏈接

第二步：就是在小程序的《開發(fā)管理-域名服務(wù)器》中的request合法域名中添加一行：https://apis.map.qq.com

在這里插入圖片描述第三步：在app.json中添加：

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

第四步：我是在onLoad生命周期加載的代碼，你可以根據(jù)具體情況把下面代碼復(fù)制到其他相應(yīng)位置；

先下載jssdk文件解壓后放到相應(yīng)位置

// 引入SDK核心類
let QQMap = require("../../utils/qqmap-wx-jssdk.min"); 
let QQMapSdk;
Page({
    
/**
 * 頁面的初始數(shù)據(jù)
 */
data: {
  currentLat:"",
  currentLon:"",
},
})

  	/**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  	onLoad(query){
   		this.getLoaction()
	}
	// 獲取位置的方法
	 getLoaction() {
        // 1.先開始定位
        wx.getLocation({
          type: 'gcj02', // 比較精確
          success: (res) => {
            // 2,地址逆解析  根據(jù)經(jīng)緯度獲取實際地址
            QQMapSdk.reverseGeocoder({
              location: {
                latitude: res.latitude,
                longitude: res.longitude
              },
              success: (data) => {
                console.log("當前地址信息：", data);
                // 存儲 詳細地址 和當前獲取的經(jīng)緯度
                let address = data.result.address + data.result.formatted_addresses.recommend;
                this.setData({
                  currentLoaction: address,
                  currentLat: data.result.location.lat,
                  currentLon: data.result.location.lng
                })
            
              },
              fail: (error) => {
                console.error("err:", error)
              },
            })
          }
        })
      }

3，計算距離

可以使用 calculateDistance 方法計算兩地經(jīng)緯度之間的距離；

   // 計算兩個經(jīng)緯度的直線距離 https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/methodCalculatedistance
     calculateDistanceFun(){
        QQMapSdk.calculateDistance({
            mode: 'straight',//直線距離
            // 起點坐標
            from: {
              latitude: this.data.latlon.lat,
              longitude: this.data.latlon.lon
            },
            // 終點坐標 to是當前位置 注意是一個數(shù)組
            to: [{
              latitude: data.result.location.lat,
              longitude: data.result.location.lng
            }],
            success: (calc) => {
              // 計算結(jié)果輸出為米
              let distance = calc.result.elements[0].distance;
              console.log("計算距離為:", distance + '米');
            },
            // 失敗的情況
            fail: (error) => {
              console.error('error:', error);
            },
          })
     }

4，報錯信息： getLocation:fail 頻繁調(diào)用會增加電量損耗

如果出現(xiàn)以下報錯信息說明：

在這里插入圖片描述

我們在調(diào)用wx.getLocation()方法的回調(diào)里面又直接調(diào)用了騰訊地圖的reverseGeocoder方法（騰訊地圖api也可能也調(diào)用了wx.getLocation()方法 導(dǎo)致間隔不夠30秒報頻繁調(diào)用）

解決方法：調(diào)用 reverseGeocoder方法時傳入經(jīng)緯度即可，什么都不傳就會報這個錯誤；

 		qqmapsdk.reverseGeocoder({
 			//傳入當前的經(jīng)緯度
              location: {
                latitude: res.latitude,
                longitude: res.longitude
              },
              success: (data) => {
              },
              fail: (error) => {
                console.error("err:", error)
              },
            })

5，報錯信息：請求源未被授權(quán)

出現(xiàn)這個報錯說明你引用的key值沒有授權(quán)你當前電腦的ip地址；

在這里插入圖片描述

解決方法：

需要在騰訊地圖的后臺配置一下你的ip;并把允許在小程序中使用勾選上；

在這里插入圖片描述

WebServiceAPI Key配置中的授權(quán)IP

到此這篇關(guān)于關(guān)于微信小程序中使用wx.getLocation獲取當前詳細位置并計算距離的文章就介紹到這了,更多相關(guān)小程序wx.getLocation獲取位置計算距離內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: