uniapp｜微信小程序获取当前城市名称--逆地址解析前端javascript

六年代码两茫茫，不思量，自难忘
6年资深前端主管一枚，只分享技术干货，项目实战经验
关注博主不迷路~

问题 uniapp开发的小程序需要获取当前城市名称
解决步骤看文档
【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=https://www.it610.com/article/res.result.ad_info; that.city = mapdata.city; },fail: function(error) { console.error(error); }, complete: function(res) { //console.log(res); } }); } });

编译