写点什么

“程”风破浪的开发者|微信小程序逆地址解析

作者:清风无影
  • 2022-10-26
    北京
  • 本文字数:1133 字

    阅读完需:约 4 分钟

“程”风破浪的开发者|微信小程序逆地址解析

问题

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 配置

  1. pages.json 配置加入以下配置项,用于申请获得位置权限


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


  1. uniapp 配置

  2. 这里填写的描述信息就是微信弹起信息微信授权弹框的描述信息

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);             }        });              }    });
复制代码


编译



我们看返回信息



现在是有返回当前位置详细信息了,当前也包括城市名称。


问题解决!



总结

遇到问题并不可怕,可怕的是停滞不前,知难而退。只有发现问题才能解决问题,才会得到成长和锻炼。人生的路总是一波三折,代码也是,风雨之后总会见到彩虹的,加油!

发布于: 刚刚阅读数: 4
用户头像

清风无影

关注

道法自然 2021-03-09 加入

🌈7年资深前端主管一枚,只分享技术干货,项目实战经验,面试指导

评论

发布
暂无评论
“程”风破浪的开发者|微信小程序逆地址解析_微信小程序_清风无影_InfoQ写作社区