企业微信自建应用获取用户地理位置 wx.getLocation

最新推荐文章于 2025-02-24 15:09:54 发布

lhp-快去搬砖

最新推荐文章于 2025-02-24 15:09:54 发布

阅读量2.1k

点赞数 7

文章标签：企业微信前端

本文链接：https://blog.csdn.net/weixin_44265726/article/details/143920098

版权

最近做了个企业微信内H5应用获取地理位置功能，用户拍照上传图片后，图片左下角显示用户当前经纬度及地理位置，开始使用的百度地图 Geolocation api获取经纬度,在用getCurrentPosition 将经纬度转换成实际地理位置。最后发现该方法只能取到城市中心点，故研究了企业微信的内部api,并实现了此功能。

由于是自建的企微第三方应用，根据实际应用情况，选择了JS-SDK下的获取地理位置方法（企微开发者中心：https://developer.work.weixin.qq.com/document/path/90546）

在这里插入图片描述

以下为实现步骤：

1、在企微后台配置应用主页，也就是部署在线上的H5页面地址
在这里插入图片描述

2、配置网页授权及JS-SDK下的可信域名（配置后端获取签名的线上服务地址，后边认证要用），并生成域名归属认证文件，并将此txt文件放到项目根目录下
在这里插入图片描述

3、根据企微开发文档中-使用说明进行四步相应开发工作
注：步骤二中需要取后端返回的时间戳、签名、随机串等。进行权限验证
在这里插入图片描述

4、按照此四步流程我的代码如下（在取到后端返回的签名等信息后，使用wx.config进行权限认证，成功后wx.ready处理成功验证，在wx.ready使用wx.getLocatio获取用户当前位置的经纬度，并存起来）


    // 对接企业微信授权，获取用户地理位置信息
    this.$get('https://xxxxxxxx').then(res=>{
      console.log('签名数据',res.data.data)
      if(res.data.code==0){ 
        var data=res.data.data;
          wx.config({
            beta: true, // 必须这么写
           // debug: true, // 开启调试模式
            appId: data.corpid, // 必填，企业微信的corpID，必须是本企业的corpID，不允许跨企业使用
            timestamp: parseInt(data.timestamp), // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名
            jsApiList: ["agentConfig","getLocation"] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
          });

          wx.ready(function(){ //通过ready接口处理成功验证
                wx.getLocation({
                    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                    success: function (res) {
                      if(res.errMsg=="getLocation:ok"){
                        var lat = res.latitude
                        var lng = res.longitude
                        window.localStorage.setItem('lat',lat)
                        window.localStorage.setItem('lng',lng)
                      }
                    }
                });
            });  

            wx.error(function(res){
              console.log('错误信息',res)
            });
          }
      })

5、在使用百度地图的Geocoder 方法中的getLocation将经纬度转换成实际地理位置


 // 使用百度地图的逆地理编码API获取当前城市
 var myGeo = new BMap.Geocoder();
 myGeo.getLocation(new BMap.Point(that.lng, that.lat), function(result){
 	console.log('地理位置信息',result)
}）