快捷導(dǎo)航

uniapp微信小程序獲取當(dāng)前城市名稱逆地址解析實(shí)例教程

更新時(shí)間：2022年11月22日 11:22:55 作者：清風(fēng)無(wú)影Q

最近在用uni-app開(kāi)發(fā)小程序,需要獲取用戶所在城市,小程序本身沒(méi)有這樣的api,那么怎么實(shí)現(xiàn)呢?下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序獲取當(dāng)前城市名稱逆地址解析的相關(guān)資料,需要的朋友可以參考下

問(wèn)題

uniapp開(kāi)發(fā)的小程序需要獲取當(dāng)前城市名稱

解決步驟

看文檔

當(dāng)然是看uniapp文檔，我們查到有提供相關(guān)的API,即uni.getLocation(OBJECT)，獲取當(dāng)前的地理位置、速度。

我們?cè)囋嚢?/p>

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

我們發(fā)現(xiàn)只能返回經(jīng)緯度信息，并不會(huì)返回城市信息。

原來(lái)是只有app才支持geocode

哈哈事情沒(méi)有想象中那么簡(jiǎn)單~

思考ing…

查閱了相關(guān)資料，原來(lái)是位置詳細(xì)信息的一些保密協(xié)議，并不能直接獲取到。那么我們就需要通過(guò)經(jīng)緯度，利用騰訊地圖JavaScript SDK逆地址解析,即輸入坐標(biāo)返回地理位置信息。

有方法了，開(kāi)整

逆地址解析

1. 創(chuàng)建應(yīng)用

打開(kāi)騰訊地圖開(kāi)放平臺(tái)，創(chuàng)建應(yīng)用

然后

控制臺(tái) ->應(yīng)用管理 -> 我的應(yīng)用 ->添加key-> 勾選

小程序SDK需要用到webserviceAPI的部分服務(wù)，所以使用該功能的KEY需要具備相應(yīng)的權(quán)限

授權(quán)ip即當(dāng)前連接服務(wù)的IP地址（注意：上線后這個(gè)一定要換成上線IP地址哦）

填入微信小程序appid

現(xiàn)在有了地圖秘鑰key

2. uniapp配置 pages.json配置

加入以下配置項(xiàng)，用于申請(qǐng)獲得位置權(quán)限

"permission": {
	"scope.userLocation": {
		"desc": "你的位置信息將用于小程序位置接口的效果展示" 
	}
}

uniapp配置

這里填寫的描述信息就是微信彈起信息微信授權(quán)彈框的描述信息

3. 代碼部分

下載微信小程序JavaScriptSDK

var QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js');
// 實(shí)例化API核心類
var qqmapsdk = new QQMapWX({
    key: '' // 必填
});

key即申請(qǐng)的騰訊地圖秘鑰key

uni.getLocation({
			type: 'gcj02',
			geocode: true,
			success: function (res) {
				//逆地址解析  坐標(biāo)轉(zhuǎn)地址信息
				qqmapsdk.reverseGeocoder({
				  //Object格式
				       location: {
				         latitude: res.latitude,
				         longitude: res.longitude
				       }, 
				    success: function(res) {//成功后的回調(diào)
					   const mapdata=res.result.ad_info;
					   that.city = mapdata.city;
				   },fail: function(error) {
				       console.error(error);
				     },
				     complete: function(res) {
				       //console.log(res);
				     }
				});
				
			}
		});

編譯