uniapp微信小程式獲取當前城市名稱逆地址解析範例教學

2022-11-23 14:00:26

問題

uniapp開發的小程式需要獲取當前城市名稱

解決步驟

看檔案

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

我們試試吧

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

我們發現只能返回經緯度資訊，並不會返回城市資訊。

原來是隻有app才支援geocode

哈哈事情沒有想象中那麼簡單~

思考ing…

查閱了相關資料，原來是位置詳細資訊的一些保密協定，並不能直接獲取到。那麼我們就需要通過經緯度，利用騰訊地圖JavaScript SDK逆地址解析,即輸入座標返回地理位置資訊。

有方法了，開整

逆地址解析

1. 建立應用

開啟騰訊地圖開放平臺，建立應用

然後

控制檯 ->應用管理 -> 我的應用 ->新增key-> 勾選

小程式SDK需要用到webserviceAPI的部分服務，所以使用該功能的KEY需要具備相應的許可權

授權ip即當前連線服務的IP地址（注意：上線後這個一定要換成上線IP地址哦）

填入微信小程式appid

現在有了地圖祕鑰key

2. uniapp設定 pages.json設定

加入以下設定項，用於申請獲得位置許可權

"permission": {
	"scope.userLocation": {
		"desc": "你的位置資訊將用於小程式位置介面的效果展示" 
	}
}

uniapp設定

這裡填寫的描述資訊就是微信彈起資訊微信授權彈框的描述資訊

3. 程式碼部分

下載微信小程式JavaScriptSDK

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

key即申請的騰訊地圖祕鑰key

uni.getLocation({
			type: 'gcj02',
			geocode: true,
			success: function (res) {
				//逆地址解析  座標轉地址資訊
				qqmapsdk.reverseGeocoder({
				  //Object格式
				       location: {
				         latitude: res.latitude,
				         longitude: res.longitude
				       }, 
				    success: function(res) {//成功後的回撥
					   const mapdata=res.result.ad_info;
					   that.city = mapdata.city;
				   },fail: function(error) {
				       console.error(error);
				     },
				     complete: function(res) {
				       //console.log(res);
				     }
				});
				
			}
		});

編譯