vue企业微信获取经纬度腾讯地图逆向解析详细地址

我就不思

已于 2024-10-10 20:42:56 修改

阅读量1.4k

点赞数

文章标签： vue.js 企业微信 android

于 2023-03-24 15:48:38 首次发布

本文链接：https://blog.csdn.net/weixin_45788691/article/details/129735796

版权

在这里插入图片描述 摘要：

今天做企业微信打卡小应用的时候，使用到调用企业微信内置sdk来获取当前经纬度，想到企业微信还是使用腾讯地图逆向解析详细地址比较准确一点，使用使用腾讯地图来解析详细地址！

在获取微信定位的时候，要先通过config接口注入权限验证配置，获取配置信息里面的内容是后端接口给出的，所用的接口域名一定要备案。一般是请求后端接口获取签名的！与后端沟通好就okk!!!

企业微信开发文档

let code = this.getQueryVariable("code");
      this.codes = code;
      if (/wxwork/i.test(navigator.userAgent)) {
        if (!!code) {
          if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
            this.wxwork();
            this.wxDefaultBrowser();
            return;
          }
        } else {
          // 正式
          window.location.replace(
            'https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxx&redirect_uri=https%3A%2F%2Fxxx.xxxx.com%2FclockingApp%2Fpindex.html&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect'
          )
          // 测试
          // window.location.replace(
          //   "https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxxxxxx&redirect_uri=http%3A%2F%2Ftestxxx.xxxx.com:20080%2Fpindex.html&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"
          // );
        }
        return;
      }

进入页面获取登录信息，拉取code进行登录校验，然后根据回来的token去请求数据，定位获取经纬度后期解析详细地址！

wxDefaultBrowser() {
        let url = window.location.href.split("#")[0];
        let that = this;
        that.$axios
          .get("/commonNoSession.do", {
            params: {
              method: that.$method.XXXX_XXXX_WECHAT_TOKEN_GET,
              data: {
                url: url,
                appKey: "corpid",
              },
            },
          })
          .then((res) => {
            Toast.loading({
              message: '加载中...',
              forbidClick: true,
            });
            if (res.data.code == 0) {
                wx.config({
                  beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
                  debug: false,
                  appId: res.data.data.appId,
                  timestamp: res.data.data.timestamp,
                  nonceStr: res.data.data.noncestr,
                  signature: res.data.data.signature,
                  jsApiList: ["getLocation"], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
                });
                wx.ready(function() {
                  wx.getLocation({
                      type: 'gcj02',
                      success: function (res) {
                        var latLng = new qq.maps.LatLng(res.latitude, res.longitude)
                        getAddr.getAddress(latLng)
                      },
                      fail: function (response) {
                        alert("请先打开手机定位刷新页面再打卡~");
                      },
                  });
                  wx.error(function (res) {
                      console.log('微信js-sdk 配置失败000' + res.errMsg)
                      // alert('微信js-sdk 配置失败000' + res.errMsg)
                  })
                });
                var getAddr = new qq.maps.Geocoder({
                    complete: function (res) {
                      alert(JSON.stringify(res))
                      var allAddress = res.detail;//成功回调详细地址
                    }
                })
            }
          })
          .catch((error) => {});
      },

获取签名wx.config企业微信注入权限，wx.getLocation获取准确的经纬度，然后调取腾讯地图qq.maps.Geocoder逆向解析详细地址！
记得index.html引入相关sdk:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>打卡</title>
  </head>
  <body>
    <div id="app-box"></div>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  </body>
</html>