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

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

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 逆地址解析, 即输出坐标返回地理位置信息。

有办法了，开整

关上腾讯地图开放平台，创立利用

而后
控制台 -> 利用治理 -> 我的利用 -> 增加 key-> 勾选

小程序 SDK 须要用到 webserviceAPI 的局部服务，所以应用该性能的 KEY 须要具备相应的权限
受权 ip 即以后连贯服务的 IP 地址（留神：上线后这个肯定要换成上线 IP 地址哦）
填入微信小程序 appid

当初有了地图秘钥 key

pages.json 配置
退出以下配置项，用于申请取得地位权限

"permission": {
    "scope.userLocation": {"desc": "你的地位信息将用于小程序地位接口的成果展现"}
}

uniapp 配置
这里填写的形容信息就是微信弹起信息微信受权弹框的形容信息

下载微信小程序 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);
                     }
                });
                
            }
        });

编译

咱们看返回信息

当初是有返回以后地位详细信息了，以后也包含城市名称。

问题解决！

遇到问题并不可怕，可怕的是停滞不前，急流勇退。只有发现问题能力解决问题，才会失去成长和锤炼。人生的路总是一波三折，代码也是，风雨之后总会见到彩虹的，加油！

✨原创不易，还希望各位支持
👍 点赞，你的认可是我创作的动力！
⭐️ 收藏，你的青睐是我努力的方向！
✏️ 评论，你的意见是我进步的财富！

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

问题

解决步骤

看文档

逆地址解析

1. 创立利用

2. uniapp 配置

3. 代码局部

总结