前言

本篇文章分享一下我在實際開發(fā)小程序時遇到的需要獲取用戶當前位置的問題，在小程序開發(fā)過程中經常使用到的獲取定位功能。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 協(xié)議。
• 國產安卓手機上，H5若無法定位，檢查手機是否開通位置服務、GPS，ROM是否給該瀏覽器位置權限、瀏覽器是否對網頁彈出請求給予定位的詢問框。
• 安卓手機 在原生App內嵌H5時，無法定位需要原生App處理Webview。
• 移動端瀏覽器 普遍僅支持GPS定位，在GPS信號弱的地方可能定位失敗。
• PC 設備 使用 Chrome 瀏覽器的時候，位置信息是連接谷歌服務器獲取的，國內用戶可能獲取位置信息失敗。
• 微信公眾號可使用微信js sdk，詳見
• 2.9.9 版本以上，優(yōu)化 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配置，打包后必須由開發(fā)者自己申請。如果手機自帶GMS且網絡環(huán)境可以正常訪問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配置。
• 持續(xù)定位方案：iOS端可以申請持續(xù)定位權限，參考。Android如果進程被殺，代碼無法執(zhí)行。可以使用 unipush ，通過服務器激活App，執(zhí)行透傳消息，讓App啟動然后采集位置。Android上，即使自己寫原生插件做后臺進程，也很容易被殺，unipush是更合適的方案
• 3.3.0 版本以上 優(yōu)化系統(tǒng)定位模塊，可不使用三方定位SDK的進行高精度定位，具體參考：系統(tǒng)定位。

小程序平臺

• api默認不返回詳細地址中文描述。需要中文地址有2種方式：1、使用高德地圖小程序sdk，在app和微信上都可以獲得中文地址，參考。2、只考慮app，使用plus.geolocation也可以獲取中文地址。manifest里的App SDK配置僅用于app，小程序無需在這里配置。
• 可以通過用戶授權API來判斷用戶是否給應用授予定位權限，詳見
• 在 微信小程序 中，當用戶離開應用后，此接口無法調用，需要申請 后臺持續(xù)定位權限 ，另外新版本中需要使用 wx.onLocationChange 監(jiān)聽位置信息變化；當用戶點擊“顯示在聊天頂部”時，此接口可繼續(xù)調用

補充： 以上內容為 官方文檔 搬運過來的，詳情可點擊鏈接跳轉至官網。

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

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

申請步驟：詳細文檔

2.1 申請開發(fā)者秘鑰

點擊文檔中的申請秘鑰鏈接，跳轉至騰訊位置服務平臺，如下圖所示申請即可。（沒有賬號的先注冊賬號）

2.2 開通webserviceAPI服務

開通webserviceAPI服務：控制臺 ->應用管理 -> 我的應用 ->添加key-> 勾選WebServiceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服務，所以使用該功能的KEY需要具備相應的權限)

1、申請Key

2、復制申請好的Key值等待使用

2.3 下載微信小程序JavaScriptSDK

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

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

2.4 安全域名設置

安全域名設置，在小程序管理后臺 -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設置 -> “服務器域名” 中設置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 調用函數

函數調用可以自己去選擇在頁面加載的時候加載，或者有一個觸發(fā)條件。（我是用的頁面加載，所以放在了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、效果展示

到這里就結束啦！想要的獲取用戶位置信息的功能就實現(xiàn)啦。

總結

到此這篇關于uniapp小程序實戰(zhàn)之利用騰訊地圖獲取定位的文章就介紹到這了,更多相關uniapp小程序用騰訊地圖獲取定位內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論