快捷導(dǎo)航

在微信小程序中獲取用戶位置的詳細(xì)過(guò)程

更新時(shí)間：2022年08月04日 08:57:01 作者：張潯

小程序需要用戶授權(quán)獲取用戶位置,獲取到經(jīng)緯度請(qǐng)求數(shù)據(jù)列表并解析為城市地址,用戶選擇城市時(shí)把城市解析為經(jīng)緯度,下面這篇文章主要給大家介紹了關(guān)于如何在微信小程序中獲取用戶位置的相關(guān)資料,需要的朋友可以參考下

前言

最近在學(xué)習(xí)微信小程序，在學(xué)習(xí)的過(guò)程中，有很多好玩的 API，經(jīng)常點(diǎn)外賣的同學(xué)可能在小程序中遇到過(guò)，比如：某團(tuán)、某了么都是有顯示當(dāng)前用戶位置信息的，那么今天給大家介紹如何獲取當(dāng)前用戶位置信息，聽(tīng)上去很不錯(cuò)，其實(shí)實(shí)踐起來(lái)也不是很難。

wx.getLocation

首先，我們需要來(lái)認(rèn)識(shí)一下 wx.getLocation 這個(gè) API 方法，我們先看看微信官方文檔中是怎么說(shuō)的

看我劃紅線的地方就可以了，文檔中明確的表示這個(gè) API 方法就是用來(lái)獲取當(dāng)前的地理位置，那么如何使用呢，往下翻，看看官網(wǎng)中的示例代碼。

看完示例代碼，對(duì)于 wx.getLocation 中的 type 和 success 不理解，這倆是干啥的？？？，繼續(xù)看文檔，文檔中寫的很詳細(xì)

通過(guò)以上信息，得出

type：默認(rèn)值為 wgs84，返回 GPS 坐標(biāo)
success：當(dāng)調(diào)用成功時(shí)，會(huì)有一個(gè)回調(diào)函數(shù)，那么回調(diào)函數(shù)返回的參數(shù)就可以做一些東西了

我們先在微信小程序中成功調(diào)用一下這個(gè) wx.getLocation API 方法，再繼續(xù)往下進(jìn)行。

代碼

將方法調(diào)用在組件生命周期中，讓組件一開(kāi)始就直接調(diào)用，因?yàn)?type 默認(rèn)值為 wgs84，所以寫不寫都可以（我懶，就不寫了）

created() {
    // 獲取當(dāng)前的地理位置
    wx.getLocation({
        success(res) {
            console.log(res)
        }
    })
}

看下控制臺(tái)輸出結(jié)果

發(fā)現(xiàn)輸出結(jié)果中的內(nèi)容和上圖中 success 回調(diào)函數(shù)的參數(shù)一一對(duì)應(yīng)，我們只需要用到 latitude 和 longitude 緯度和經(jīng)度這兩個(gè)參數(shù)，那么怎么通過(guò)緯度和經(jīng)度獲取到具體的地理位置信息呢？

聰明的小伙伴百度一搜相關(guān)的工具就出來(lái)一大堆，工具很多，比如：經(jīng)緯度/GPS坐標(biāo)查詢地圖地址在線工具，但是我們是將來(lái)碼界的一員啊，我們應(yīng)該敲代碼實(shí)現(xiàn)才對(duì)，況且，如果你寫的項(xiàng)目上線之后，你還依賴在線工具去實(shí)現(xiàn)這個(gè)功能嗎，太不現(xiàn)實(shí)了。

但是！我們可以借助大廠的技術(shù)服務(wù)??，比如：騰訊位置服務(wù) 、百度地圖開(kāi)放平臺(tái) 、高德開(kāi)放平臺(tái)

騰訊位置服務(wù)

我就給大家介紹如何使用騰訊的位置服務(wù)了啊，這些技術(shù)服務(wù)基本區(qū)別不大，也很容易上手。

首先，大家需要去注冊(cè) 一個(gè)號(hào)，綁定郵箱。

登錄成功進(jìn)去之后，按照下圖進(jìn)行操作

接著會(huì)彈出如下界面，進(jìn)行填寫即可

Key 名稱很好理解吧，就是相當(dāng)于咱們寫代碼中的屬性名
描述就不過(guò)多介紹了，就相當(dāng)于咱們寫代碼中的注釋
啟用產(chǎn)品為什么要選擇 WebServiceAPI 呢？因?yàn)楹?jiǎn)單上手快，至于其他的，小伙伴們可以自己研究一下
剩下的就不過(guò)多介紹了吧，字面意思??

注意

這里添加的 key 不要向外透露！??！這是密鑰，你進(jìn)入家門的鑰匙，不能隨便給別人！

接著繼續(xù)按下圖操作

你會(huì)看到如下內(nèi)容

選擇逆地址解析(坐標(biāo)位置描述) 選項(xiàng)，右側(cè)內(nèi)容也明確的表示出此接口用來(lái)將經(jīng)緯度轉(zhuǎn)換能文字地址信息，具體如何使用，翻到最底部，看示例代碼

你會(huì)看到人家請(qǐng)求時(shí)攜帶了三個(gè)參數(shù)， location、get-poi、key ，分別是什么意思呢？往上翻，繼續(xù)閱讀文檔

location：將咱們用 wx.getLocation 獲取到的經(jīng)緯度坐標(biāo)寫在這里，格式為 latitude(緯度),longitude(經(jīng)度)，注意是用逗號(hào)分隔
get_poi：表示是否返回周邊地點(diǎn)的信息，默認(rèn)值為 0(不返回)，根據(jù)需求修改就好了
key：就是咱們一開(kāi)始添加的密鑰

看到這里，我們可以動(dòng)手實(shí)現(xiàn)了

代碼

created() {
    // 獲取當(dāng)前的經(jīng)緯度坐標(biāo)
    wx.getLocation({
        success(res) {
            // 緯度
            const latitude = res.latitude
            // 經(jīng)度
            const longitude = res.longitude
            // 請(qǐng)求騰訊地圖逆地址解析接口
            wx.request({
                url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=寫你自己添加的密鑰`,
                success(res) {
                    console.log(res)
                }
            })
        }
    })
}

響應(yīng)結(jié)果