前言

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

wx.getLocation

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

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

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

通過以上信息，得出

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

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

代碼

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

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

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

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

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

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

騰訊位置服務(wù)

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

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

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

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

• Key 名稱很好理解吧，就是相當(dāng)于咱們寫代碼中的屬性名
• 描述就不過多介紹了，就相當(dāng)于咱們寫代碼中的注釋
• 啟用產(chǎn)品為什么要選擇 WebServiceAPI 呢？因?yàn)楹唵紊鲜挚欤劣谄渌?，小伙伴們可以自己研究一?/li>
• 剩下的就不過多介紹了吧，字面意思??

注意

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

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

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

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

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

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

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

代碼

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

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

最終將地址渲染到頁面即可

看到這里，恭喜你學(xué)會了，趕快動手實(shí)踐一下吧

總結(jié)

• 使用 wx.getLocation API 方法獲取當(dāng)前位置的經(jīng)緯度坐標(biāo)
• 使用第三方地圖服務(wù)來實(shí)現(xiàn)對經(jīng)緯度坐標(biāo)的轉(zhuǎn)換

相信小伙伴們看明白了，其他的第三方地圖服務(wù)也是相差無幾的，嘗試著自己去閱讀理解一下，加油。

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

參考文獻(xiàn)

微信小程序?qū)崿F(xiàn)城市定位

最新評論