admin管理员组文章数量:1559075
摘要：
今天做企业微信打卡小应用的时候，使用到调用企业微信内置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/connect/oauth2/authorize?appid=xxxxxxx&redirect_uri=https://xxx.xxxx/clockingapp/pindex.html&response_type=code&scope=snsapi_base&state=state#wechat_redirect'
)
// 测试
// window.location.replace(
// "https://open.weixin.qq/connect/oauth2/authorize?appid=xxxxxxxx&redirect_uri=http://testxxx.xxxx:20080/pindex.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/open/js/jweixin-1.2.0.js"></script>
<script src="https://open.work.weixin.qq/wwopen/js/jwxwork-1.0.0.js"></script>
<script charset="utf-8" src="https://map.qq/api/js?v=2.exp&key=ob4bz-d4w3u-b7vvo-4pjww-6tkdj-wpb77"></script>
</body>
</html>
遇到的坑：
调用wx.getlocation使用wgs84时获取回来的经纬度腾讯地图解析出来的详细地址好像相差一公里，特别不正确的！所以使用了火星坐标gcj02，高级，就是回来的address带有中国！难道可以定位外国去？？？
九游会下载的版权声明：本文标题：vue企业微信获取经纬度腾讯地图逆向解析详细地址 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1727422316a1113718.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论