快捷導航

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

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

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

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

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

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

注冊一個賬號

點擊控制臺->應用管理->我的應用

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

為該應用添加一個新的 key

key 名稱隨便寫

同時勾選“webserviceapi”以及“微信小程序”

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

此時就會獲得我們的第一個 key，請復制該 key，后續(xù)調(diào)用接口的時候需要用到它

快速測試

配置 SDK

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

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

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

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

小程序配置

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

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

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

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

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

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

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

根據(jù)官網(wǎng)標準指引，我們新建一個 page，名字隨意

按照模板輸入以下代碼，即可獲取到當前位置周邊的若干酒店狀況

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

Page({
    ...

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

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

獲取用戶精確位置

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

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

我們不需要傳入當前地理位置信息，接口會自動獲取！我們僅需從 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);
      }
    })
  },