快捷導(dǎo)航

微信小程序如何實(shí)現(xiàn)快速精確定位

更新時(shí)間：2023年06月07日 14:21:45 作者：知奕奕

騰訊位置服務(wù)為微信小程序提供了基礎(chǔ)的標(biāo)點(diǎn)能力、線和圓的繪制接口等地圖組件和位置展示、地圖選點(diǎn)等地圖API位置服務(wù)能力支持,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何實(shí)現(xiàn)快速精確定位的相關(guān)資料,需要的朋友可以參考下

騰訊位置服務(wù)注冊(cè)

前置需求：擁有一個(gè) APPID（只要你注冊(cè)了小程序就都會(huì)有）
騰訊為每個(gè)獨(dú)立開發(fā)者都準(zhǔn)備了 10000次/天 的接口調(diào)用量，足夠我們開發(fā)使用了

前往騰訊位置服務(wù)官網(wǎng)：https://lbs.qq.com/

注冊(cè)一個(gè)賬號(hào)

點(diǎn)擊控制臺(tái)->應(yīng)用管理->我的應(yīng)用

點(diǎn)擊創(chuàng)建新的應(yīng)用，應(yīng)用名稱和應(yīng)用類型隨便選

為該應(yīng)用添加一個(gè)新的 key

key 名稱隨便寫

同時(shí)勾選“webserviceapi”以及“微信小程序”

同時(shí)填入我們的 APPID； webserviceapi 默認(rèn)選擇“域名白名單”即可，白名單內(nèi)什么都不用寫

此時(shí)就會(huì)獲得我們的第一個(gè) key，請(qǐng)復(fù)制該 key，后續(xù)調(diào)用接口的時(shí)候需要用到它

快速測(cè)試

配置 SDK

進(jìn)入此網(wǎng)站下載 SDK：https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview

或者點(diǎn)擊頂部菜單欄的開發(fā)文檔->微信小程序 JavaScriptSDK 即可來到下載頁面

按照官方文檔 3、4 步的指引，下載 SDK 以及配置好小程序的合法域名！

官網(wǎng)給出的建議是，下載的 SDK 放在哪都可以，我在小程序項(xiàng)目的根目錄下創(chuàng)建了 api 文件夾，將兩個(gè) js 文件都丟了進(jìn)去

小程序配置

網(wǎng)上許多方法給出的建議都是讓我們?nèi)バ〕绦蚝筇旃芾眄撁?，進(jìn)入到開發(fā)管理中的接口設(shè)置面板，選擇性的申請(qǐng)對(duì)應(yīng)的接口；

這里建議大家優(yōu)先選擇申請(qǐng) getLocation

事實(shí)上，申請(qǐng)與否都不影響當(dāng)前我們調(diào)用騰訊位置服務(wù)接口，這里只是為了后續(xù)可能會(huì)用到的場(chǎng)景打下鋪墊

最關(guān)鍵的一點(diǎn)來了！

打開小程序項(xiàng)目下的 app.json ，我們需要配置如下兩個(gè)配置項(xiàng)，才可以保證接口正確的調(diào)用

scope.userLocation 基于開發(fā)者調(diào)用地理位置接口的權(quán)限
requiredPrivateInfos 在這里配置開發(fā)時(shí)需要用到的 API 名稱，一般開發(fā)只會(huì)用到 getLocation

"permission": {
    "scope.userLocation": {
      "desc": "您的位置信息將用于發(fā)布現(xiàn)象"
    }
  },
"requiredPrivateInfos": ["getLocation","chooseLocation"],

根據(jù)官網(wǎng)標(biāo)準(zhǔn)指引，我們新建一個(gè) page，名字隨意

按照模板輸入以下代碼，即可獲取到當(dāng)前位置周邊的若干酒店?duì)顩r

var QQMapWX = require("../../api/qqmap-wx-jssdk.js");
var qqmapsdk;

Page({
    ...

    // 頁面載入時(shí)通過我們之前復(fù)制的key注冊(cè)接口
	onLoad() {
		qqmapsdk = new QQMapWX({
			key: "xxxxx",
		});
	},

    // 獲取地理位置的方法，接口屬性應(yīng)該很簡(jiǎn)單不用再解釋了
	getPosition() {
		qqmapsdk.search({
			keyword: "酒店",
			success: (res) => {
				console.log(res);
			},
			fail: (err) => {
				console.log(err);
			},
			complete: (res) => {
				console.log("完成獲取地點(diǎn)信息");
			},
		});
	}
});

獲取用戶精確位置

配置保持不變，我將在以上兩小節(jié)的基礎(chǔ)之上組織以下的內(nèi)容

通過逆地址解析 reverseGeocoder（將經(jīng)緯度信息轉(zhuǎn)換為實(shí)際地址），實(shí)現(xiàn)精確定位

我們不需要傳入當(dāng)前地理位置信息，接口會(huì)自動(dòng)獲取！我們僅需從 success 回調(diào)拿到結(jié)果即可！

data: {
    position: ""
  },
getPosition() {
    let that = this
    qqmapsdk.reverseGeocoder({
      success:(res)=>{
        that.setData({
          position:res.result.address
        })
      },
      fail:(err)=>{
        console.log(err);
      }
    })
  },