文章目錄
前言
本篇文章分享一下我在實際開發小程序時遇到的需要獲取用戶當前位置的問題無法定位程序輸入點k32,在小程序開發過程中經常使用到的獲取定位功能。官方也提供了相應的API供我們使用。
官網地址:
正文 1、首先看官網 uni.()
獲取當前的地理位置、速度。
參數說明
參數名類型必填說明平臺差異說明
type
否
默認為 wgs84 返回 gps 坐標,gcj02 返回國測局坐標,可用于 uni. 和 map 組件坐標,App 和 H5 需配置定位 SDK 信息才可支持 gcj02。
否
傳入 true 會返回高度信息,由于獲取高度需要較高精確度,會減慢接口返回速度
字節跳動小程序、飛書小程序、支付寶小程序不支持
否
默認false,是否解析地址信息
僅App平臺支持(安卓需指定 type 為 gcj02 并配置三方定位SDK)
me
否
高精度定位超時時間(ms),指定時間內返回最高精度,該值以上高精度定位才有效果
App (3.2.11+)、H5 (3.2.11+)、微信小程序 (基礎庫 2.9.0+)
否
默認為 5,定位超時時間,單位秒
僅飛書小程序支持
否
定位緩存超時時間無法定位程序輸入點k32,單位秒;每次定位緩存當前定位數據,并記下時間戳,當下次調用在之內時,返回緩存數據
僅飛書小程序、支付寶小程序支持
否
默認為 high,指定期望精度,支持 high,best。當指定 high 時,期望精度值為100m,當指定 best 時期望精度值為20m。當定位得到的精度不符合條件時,在之前會繼續定位,嘗試拿到符合要求的定位結果
僅飛書小程序支持
否
開啟高精度定位
App (3.4.0+)、H5 (3.4.0+)、微信小程序 (基礎庫 2.9.0+)
是
接口調用成功的回調函數,返回內容詳見返回參數說明。
fail
否
接口調用失敗的回調函數
否
接口調用結束的回調函數(調用成功、失敗都會執行)
返回參數說明
參數說明
緯度,浮點數,范圍為-90~90,負數表示南緯
經度,浮點數,范圍為-180~180,負數表示西經
speed
速度,浮點數,單位m/s
位置的精確度
高度,單位 m
垂直精度,單位 m( 無法獲取,返回 0)
水平精度,單位 m
地址信息(僅App端支持,需配置為true)
地址信息說明
屬性類型描述說明
國家
如“中國”,如果無法獲取此信息則返回
省份名稱
如“北京市”,如果無法獲取此信息則返回
city
城市名稱
如“北京市”,如果無法獲取此信息則返回
區(縣)名稱
如“朝陽區”,如果無法獲取此信息則返回
街道信息
如“酒仙橋路”,如果無法獲取此信息則返回
獲取街道門牌號信息
如“3號”,如果無法獲取此信息則返回
POI信息
如“電子城.國際電子總部”,如果無法獲取此信息則返回
郵政編碼
如“”,如果無法獲取此信息則返回
城市代碼
如“010”,如果無法獲取此信息則返回
uni.getLocation({
type: 'wgs84',
success: function (res) {
console.log('當前位置的經度:' + res.longitude);
console.log('當前位置的緯度:' + res.latitude);
}
});
注意
App 平臺
小程序平臺
補充: 以上內容為 搬運過來的,詳情可點擊鏈接跳轉至官網。
我們本次開發的是小程序,需要注意的是,我們本次小程序獲取定位使用的是騰訊位置服務,所以需要申請騰訊位置服務的SDK。
2、騰訊位置服務平臺申請密鑰和下載SDK
申請步驟:詳細文檔
2.1 申請開發者秘鑰
點擊文檔中的申請秘鑰鏈接,跳轉至騰訊位置服務平臺,如下圖所示申請即可。(沒有賬號的先注冊賬號)
2.2 開通服務
開通服務:控制臺 ->應用管理 -> 我的應用 ->添加key-> 勾選 -> 保存
(小程序SDK需要用到的部分服務,所以使用該功能的KEY需要具備相應的權限)
1、申請Key
2、復制申請好的Key值等待使用
2.3 下載微信小程序
微信小程序下載地址(點擊文字即可跳轉)
下載好解壓完成后,我們一般放在根目錄下面的目錄下(如下圖)
2.4 安全域名設置
安全域名設置,在小程序管理后臺 -> 開發 -> 開發管理 -> 開發設置 -> “服務器域名” 中設置合法域名,添加
到這里終于算是申請完了,在配置一下就好了。
3、配置.json文件
"permission" : {
"scope.userLocation" : {
"desc" : "為了您更好的體驗,請確認獲取您的位置"
}
}
"requiredPrivateInfos": ["getLocation", "chooseLocation"]
4、示例代碼展示 4.1 引用下載好的SDK
這里我放到了目錄下:
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 調用函數
函數調用可以自己去選擇在頁面加載的時候加載,或者有一個觸發條件。(我是用的頁面加載,所以放在了方法中)。
async onLoad() {
const location = await this.getLocationInfo();
this.position = location.address
},
注意:這里使用的this.,是在data中定義的,代碼示例中沒有寫。需要自己在data方法中定一個變量
4.4 頁面渲染
<view style="margin-top: 40rpx;margin-left: 16rpx;color:red;">
當前定位:{{position}}
view>
5、效果展示
到這里就結束啦!想要的獲取用戶位置信息的功能就實現啦。