前言

本篇文章分享一下我在實(shí)際開發(fā)小程序時遇到的需要獲取用戶當(dāng)前位置的問題，在小程序開發(fā)過程中經(jīng)常使用到的獲取定位功能。uniapp官方也提供了相應(yīng)的API供我們使用。

官網(wǎng)地址：uni.getLocation(OBJECT))

1、首先看官網(wǎng)

uni.getLocation(OBJECT)

獲取當(dāng)前的地理位置、速度。

OBJECT 參數(shù)說明

success 返回參數(shù)說明

address 地址信息說明

示例

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

#注意

H5 平臺

• 在較新的瀏覽器上，H5 端獲取定位信息，要求部署在 https 服務(wù)上，本地預(yù)覽（localhost）仍然可以使用 http 協(xié)議。
• 國產(chǎn)安卓手機(jī)上，H5若無法定位，檢查手機(jī)是否開通位置服務(wù)、GPS，ROM是否給該瀏覽器位置權(quán)限、瀏覽器是否對網(wǎng)頁彈出請求給予定位的詢問框。
• 安卓手機(jī) 在原生App內(nèi)嵌H5時，無法定位需要原生App處理Webview。
• 移動端瀏覽器 普遍僅支持GPS定位，在GPS信號弱的地方可能定位失敗。
• PC 設(shè)備 使用 Chrome 瀏覽器的時候，位置信息是連接谷歌服務(wù)器獲取的，國內(nèi)用戶可能獲取位置信息失敗。
• 微信公眾號可使用微信js sdk，詳見
• 2.9.9 版本以上，優(yōu)化 uni.getLocation 支持通過 IP 定位。默認(rèn)通過 GPS 獲取，如果獲取失敗，備選方案是通過 IP 定位獲取，需填寫三方地圖服務(wù)平臺的秘鑰（key）。key配置：manifest.json —> H5配置 —> 定位和地圖 —> key。

App 平臺

• Android由于谷歌服務(wù)被墻，或者手機(jī)上沒有GMS，想正常定位就需要向高德等三方服務(wù)商申請SDK資質(zhì)，獲取AppKey。否則打包后定位就會不準(zhǔn)。云打包時需要在manifest的SDK配置中填寫 Appkey。在 manifest 可視化界面有詳細(xì)申請指南，詳見：https://ask.dcloud.net.cn/article/29。離線打包自行在原生工程中配置。注意包名、appkey、證書信息必須匹配。真機(jī)運(yùn)行可以正常定位，是因?yàn)檎鏅C(jī)運(yùn)行基座使用了DCloud向高德申請的sdk配置，打包后必須由開發(fā)者自己申請。如果手機(jī)自帶GMS且網(wǎng)絡(luò)環(huán)境可以正常訪問google定位服務(wù)器，此時無需在 manifest 填寫高德定位的 sdk 配置。
• 注意手機(jī)自身要開啟定位、同時要給App賦予定位權(quán)限。權(quán)限判斷可參考：https://uniapp.dcloud.net.cn/api/system/getappauthorizesetting.html
• <map> 組件默認(rèn)為國測局坐標(biāo) gcj02，調(diào)用 uni.getLocation 返回結(jié)果傳遞給 <map> 組件時，需指定 type 為 gcj02。
• 定位 和 map 是兩個東西。通過 getLocation 得到位置坐標(biāo)后，可以在任意map地圖上展示，比如定位使用高德，地圖使用 google 的 webview 版地圖。如果坐標(biāo)系不同時，注意轉(zhuǎn)換坐標(biāo)系。
• 如果使用 web-view 加載地圖，無需在manifest里配地圖的sdk配置。
• 持續(xù)定位方案：iOS端可以申請持續(xù)定位權(quán)限，參考。Android如果進(jìn)程被殺，代碼無法執(zhí)行?？梢允褂?unipush ，通過服務(wù)器激活A(yù)pp，執(zhí)行透傳消息，讓App啟動然后采集位置。Android上，即使自己寫原生插件做后臺進(jìn)程，也很容易被殺，unipush是更合適的方案
• 3.3.0 版本以上 優(yōu)化系統(tǒng)定位模塊，可不使用三方定位SDK的進(jìn)行高精度定位，具體參考：系統(tǒng)定位。

小程序平臺

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

補(bǔ)充： 以上內(nèi)容為 官方文檔 搬運(yùn)過來的，詳情可點(diǎn)擊鏈接跳轉(zhuǎn)至官網(wǎng)。

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

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

申請步驟：詳細(xì)文檔

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

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

2.2 開通webserviceAPI服務(wù)

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

1、申請Key

2、復(fù)制申請好的Key值等待使用

2.3 下載微信小程序JavaScriptSDK

微信小程序JavaScriptSDK下載地址（點(diǎn)擊文字即可跳轉(zhuǎn)）

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

2.4 安全域名設(shè)置

安全域名設(shè)置，在小程序管理后臺 -> 開發(fā) -> 開發(fā)管理 -> 開發(fā)設(shè)置 -> “服務(wù)器域名” 中設(shè)置request合法域名，添加https://apis.map.qq.com

到這里終于算是申請完了，在配置一下就好了。

3、配置manifest.json文件

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

4、示例代碼展示

4.1 引用下載好的SDK

這里我放到了common目錄下：

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

4.2 獲取定位函數(shù)示例

methods: {
	//獲取位置信息
  async getLocationInfo() {
    return new Promise((resolve) => {
      //位置信息默認(rèn)數(shù)據(jù)
      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 調(diào)用函數(shù)

函數(shù)調(diào)用可以自己去選擇在頁面加載的時候加載，或者有一個觸發(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;">
	當(dāng)前定位：{{position}}
</view>

5、效果展示

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

總結(jié)

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

最新評論