uniapp开发的小程序需要获取当前城市名称

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

这个只能获取经纬度并不能获取城市名称

原来是位置详细信息的一些保密协议,并不能直接获取到。那么我们就需要通过经纬度,利用腾讯地图JavaScript SDK逆地址解析,即输入坐标返回地理位置信息。

打开腾讯地图开放平台,创建应用

 然后
控制台 ->应用管理 -> 我的应用 ->添加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);
                     }
                });

            }
});

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐