uniapp小程式實戰之利用騰訊地圖獲取定位

前言

本篇文章分享一下我在實際開發小程式時遇到的需要獲取使用者當前位置的問題，在小程式開發過程中經常使用到的獲取定位功能。uniapp官方也提供了相應的API供我們使用。

官網地址：uni.getLocation(OBJECT))

1、首先看官網

uni.getLocation(OBJECT)

獲取當前的地理位置、速度。

OBJECT 引數說明

success 返回引數說明

address 地址資訊說明

範例

uni.getLocation({
	type: 'wgs84',
	success: function (res) {
		console.log('當前位置的經度：' + res.longitude);
		console.log('當前位置的緯度：' + res.latitude);
	}
});

#注意

H5 平臺

• 在較新的瀏覽器上，H5 端獲取定位資訊，要求部署在 https 服務上，本地預覽（localhost）仍然可以使用 http 協定。
• 國產安卓手機上，H5若無法定位，檢查手機是否開通位置服務、GPS，ROM是否給該瀏覽器位置許可權、瀏覽器是否對網頁彈出請求給予定位的詢問框。
• 安卓手機 在原生App內嵌H5時，無法定位需要原生App處理Webview。
• 行動端瀏覽器 普遍僅支援GPS定位，在GPS訊號弱的地方可能定位失敗。
• PC 裝置 使用 Chrome 瀏覽器的時候，位置資訊是連線谷歌伺服器獲取的，國內使用者可能獲取位置資訊失敗。
• 微信公眾號可使用微信js sdk，詳見
• 2.9.9 版本以上，優化 uni.getLocation 支援通過 IP 定位。預設通過 GPS 獲取，如果獲取失敗，備選方案是通過 IP 定位獲取，需填寫三方地圖服務平臺的祕鑰（key）。key設定：manifest.json —> H5設定 —> 定位和地圖 —> key。

App 平臺

• Android由於谷歌服務被牆，或者手機上沒有GMS，想正常定位就需要向高德等三方服務商申請SDK資質，獲取AppKey。否則打包後定位就會不準。雲打包時需要在manifest的SDK設定中填寫 Appkey。在 manifest 視覺化介面有詳細申請指南，詳見：https://ask.dcloud.net.cn/article/29。離線打包自行在原生工程中設定。注意包名、appkey、證書資訊必須匹配。真機執行可以正常定位，是因為真機執行基座使用了DCloud向高德申請的sdk設定，打包後必須由開發者自己申請。如果手機自帶GMS且網路環境可以正常存取google定位伺服器，此時無需在 manifest 填寫高德定位的 sdk 設定。
• 注意手機自身要開啟定位、同時要給App賦予定位許可權。許可權判斷可參考：https://uniapp.dcloud.net.cn/api/system/getappauthorizesetting.html
• <map> 元件預設為國測局座標 gcj02，呼叫 uni.getLocation 返回結果傳遞給 <map> 元件時，需指定 type 為 gcj02。
• 定位 和 map 是兩個東西。通過 getLocation 得到位置座標後，可以在任意map地圖上展示，比如定位使用高德，地圖使用 google 的 webview 版地圖。如果座標系不同時，注意轉換座標系。
• 如果使用 web-view 載入地圖，無需在manifest裡配地圖的sdk設定。
• 持續定位方案：iOS端可以申請持續定位許可權，參考。Android如果程序被殺，程式碼無法執行。可以使用 unipush ，通過伺服器啟用App，執行透傳訊息，讓App啟動然後採集位置。Android上，即使自己寫原生外掛做後臺程序，也很容易被殺，unipush是更合適的方案
• 3.3.0 版本以上 優化系統定位模組，可不使用三方定位SDK的進行高精度定位，具體參考：系統定位。

小程式平臺

• api預設不返回詳細地址中文描述。需要中文地址有2種方式：1、使用高德地圖小程式sdk，在app和微信上都可以獲得中文地址，參考。2、只考慮app，使用plus.geolocation也可以獲取中文地址。manifest裡的App SDK設定僅用於app，小程式無需在這裡設定。
• 可以通過使用者授權API來判斷使用者是否給應用授予定位許可權，詳見
• 在 微信小程式 中，當用戶離開應用後，此介面無法呼叫，需要申請 後臺持續定位許可權 ，另外新版本中需要使用 wx.onLocationChange 監聽位置資訊變化；當用戶點選“顯示在聊天頂部”時，此介面可繼續呼叫

補充： 以上內容為 官方檔案 搬運過來的，詳情可點選連結跳轉至官網。

我們本次開發的是小程式，需要注意的是，我們本次小程式獲取定位使用的是騰訊位置服務，所以需要申請騰訊位置服務的SDK。

2、騰訊位置服務平臺申請金鑰和下載SDK

申請步驟：詳細檔案

2.1 申請開發者祕鑰

點選檔案中的申請祕鑰連結，跳轉至騰訊位置服務平臺，如下圖所示申請即可。（沒有賬號的先註冊賬號）

2.2 開通webserviceAPI服務

開通webserviceAPI服務：控制檯 ->應用管理 -> 我的應用 ->新增key-> 勾選WebServiceAPI -> 儲存
(小程式SDK需要用到webserviceAPI的部分服務，所以使用該功能的KEY需要具備相應的許可權)

1、申請Key

2、複製申請好的Key值等待使用

2.3 下載微信小程式JavaScriptSDK

微信小程式JavaScriptSDK下載地址（點選文字即可跳轉）

下載好解壓完成後，我們一般放在根目錄下面的common目錄下（如下圖）

2.4 安全域名設定

安全域名設定，在小程式管理後臺 -> 開發 -> 開發管理 -> 開發設定 -> “伺服器域名” 中設定request合法域名，新增https://apis.map.qq.com

到這裡終於算是申請完了，在設定一下就好了。

3、設定manifest.json檔案

 "permission" : {
	 "scope.userLocation" : {
	     "desc" : "為了您更好的體驗，請確認獲取您的位置"
	 }
}	
 "requiredPrivateInfos": ["getLocation", "chooseLocation"]

4、範例程式碼展示

4.1 參照下載好的SDK

這裡我放到了common目錄下：

import QQMapWX from "../../common/qqmap-wx-jssdk.js"

4.2 獲取定位函數範例

methods: {
	//獲取位置資訊
  async getLocationInfo() {
    return new Promise((resolve) => {
      //位置資訊預設資料
      let location = {
        longitude: 0,
        latitude: 0,
        province: "",
        city: "",
        area: "",
        street: "",
        address: "",
      };
      uni.getLocation({
        type: "gcj02",
        success(res) {
          location.longitude = res.longitude;
          location.latitude = res.latitude;
          // 騰訊地圖Api
          const qqmapsdk = new QQMapWX({
            key: 'XXXXXXXXXXXXXXXXXXXXXXXX'  //這裡填寫自己申請的key
          });
          qqmapsdk.reverseGeocoder({
            location,
            success(response) {
              let info = response.result;
        	  console.log(info);
              location.province = info.address_component.province;
              location.city = info.address_component.city;
              location.area = info.address_component.district;
              location.street = info.address_component.street;
              location.address = info.address;
              resolve(location);
            },
          });
        },
        fail(err) {
			console.log(err)
          resolve(location);
        },
      });
    });
  }
 }

4.3 呼叫函數

函數呼叫可以自己去選擇在頁面載入的時候載入，或者有一個觸發條件。（我是用的頁面載入，所以放在了onload方法中）。

async onLoad() {
	const location = await this.getLocationInfo();
	this.position = location.address
},

注意：這裡使用的this.position，是在data中定義的，程式碼範例中沒有寫。需要自己在data方法中定一個position變數

4.4 頁面渲染

<view style="margin-top: 40rpx;margin-left: 16rpx;color:red;">
	當前定位：{{position}}
</view>

5、效果展示

到這裡就結束啦！想要的獲取使用者位置資訊的功能就實現啦。

總結

到此這篇關於uniapp小程式實戰之利用騰訊地圖獲取定位的文章就介紹到這了,更多相關uniapp小程式用騰訊地圖獲取定位內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！