老板要求做一個微信小程序,后面又希望能轉為app. 所以選擇了uniapp開發(fā). 我的體驗和感想就是以后不用uniapp了. 資源不多,學習了可能用處也不大.適合外包的干.這里寫一下使用uniapp開發(fā)微信小程序獲取地理位置

基本邏輯是使用uniapp的api首先獲得地理經(jīng)緯度位置等信息(在這之前可以先讓用戶授權,然后根據(jù)獲得的地理位置信息利用騰訊的服務得到具體的位置名字.

這里我主要利用uniapp開發(fā)微信小程序.

基本流程

getsetting主要用于獲取用戶當前設置

這里重要的就是scope.xx查看用戶的授權

uni.getSetting({success: (res) => {
						if (res.authSetting && res.authSetting.hasOwnProperty("scope.userFuzzyLocation")) {
							console.log('獲取到auth',res)
							if (res.authSetting["scope.userFuzzyLocation"]) {
								this.getCityInfo();
							} else {
								uni.showModal({
									title: "提示",
									content: "請重新授權獲取你的地理位置，否則部分功能將無法使用.\r\n提示:點擊小程序右上角的三個點在設置中修改授權",
									success: (res) => {
										if (res.confirm) {
											uni.openSetting({
												success: () => this.getCityInfo()
											});
										} else
										{
											this.getCovidData();
										}
									},
								});
							}
						} else {
							console.log('正確')
							console.log(res)
							this.getCityInfo();
						}
					}
				})

這里的scope.userFuzzyLocation就是需要用戶授權的,res.authsetting如果包含這個且為true就進行下一步操作.如果沒有這個選項,即res.authSetting.hasOwnProperty(“scope.userFuzzyLocation”)返回false,這樣就需要去授權.

getCityInfo() {
				console.log('調用getCityInfo')
					uni.authorize({
						scope: "scope.userFuzzyLocation",
						success: () => {
							console.log('授權')
							//做授權之后的操作
								},
								fail: (res) => {
									
								}
						},
						fail: (res) => {
							console.log(res);
							this.loadError();
						}
					})
			},

uni.authorize 提前向用戶發(fā)起授權請求。調用后會立刻彈窗詢問用戶是否同意授權小程序使用某項功能或獲取用戶的某些數(shù)據(jù)，但不會實際調用對應接口.

uni.authorize({
    scope: 'scope.userLocation',
    success() {
        uni.getLocation()
    }
})

如果用戶之前已經(jīng)同意授權，則不會出現(xiàn)彈窗，直接返回成功。如果用戶之前拒絕了授權，此接口會直接進入失敗回調.

當調用這個接口之后就能有對應的scope.xx的值了,要么為true要么為false. authorize會跳出一個彈窗,請求獲取權限,如果接受了那就沒多大事了.

如果沒有接受,就可以調取

uni.openSetting({
		success: () => this.getCityInfo()
	});

調起客戶端小程序設置界面，返回用戶設置的操作結果.

uni.openSetting會打開一個這樣的界面讓用戶設置.用戶在這里允許授權即可.

具體設置

在uniapp中,需要設置一些需要用戶授權的權限.

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Xp1wDkMD-1672047026640)(null)]

在uniapp中打開manifest.json中的源碼視圖,找到permission如上圖.

添加需要的scope和requirePrivateInfos.

同時getsetting中需要看scope.xx是否存在以及是否為true.

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bmJlWHHY-1672047026610)(null)]

uni.authorize中也需要獲取需要用戶授權的scope

注意

在微信小程序中,使用一些平臺提供的接口需要權限.

比如獲取當前的地理位置、速度需要小程序的類目相符合,而獲取當前的模糊地理位置也需要申請權限.不過這個接口相對來說比較好申請,但是這個接口有點bug,我一開始申請之后當天模擬器上有點問題,不過后面就好了.申請了之后可以利用騰訊提供的sdk將經(jīng)緯度轉為具體的位置名.

代碼基本如下文章來源地址http://www.zghlxwxcb.cn/news/detail-466018.html

uni.getFuzzyLocation({
								type: "gcj02", //  wgs84: 返回GPS坐標，gcj02: 返回國測局坐標
								success: res => {
									console.log('獲取位置', res)
									const {
										latitude,
										longitude
									} = res;
									const location = {
										latitude,
										longitude
									};
									this.qqmapsdk.reverseGeocoder({
										location,
										success: (res) => {
											let loginAddress = res.result.ad_info.name
											console.log(loginAddress)
											this.flag = true;
											// 獲取信息
											this.country = loginAddress.split(',')[0];
											this.province = loginAddress.split(',')[1];
											this.city = loginAddress.split(',')[2];
											this.district = loginAddress.split(',')[3];
											this.formvalue.location = this.province + '>' +
												this.city + '>' + this.district;
										
											this.donext();
										},
										fail: (res) => {
										
											console.log(res)
										},
									});
								},
								fail: (res) => {
									console.log(res)
								
								}
							});

參考資料

1. 微信小程序JavaScript SDK | 騰訊位置服務 (qq.com)
2. uni-app微信小程序獲取用戶地理位置信息_DOM曼珠沙華的博客-CSDN博客_uni.getsetting

到了這里，關于使用uniapp開發(fā)獲取地理位置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！