0
点赞
收藏
分享

微信扫一扫

vue 编写H5页面在公众号外部获取手机本地坐标经纬度


 1、必须先注册个公众号,且认证后去下面这个地方配置好您的域名

vue 编写H5页面在公众号外部获取手机本地坐标经纬度_javascript

这仨地方都得设置,目前我试了下用域名还是用具体项目所在的文件夹目录没什么明显差异

 

譬如你是用shuzhiqiang.com或者shuzhiqiang.com/path貌似都差不多,不知道各位小伙伴遇到过什么差异没

2、上代码

// import wx from "weixin-jsapi"; //这个快要被废弃了1.0.0
import wx from "weixin-js-sdk"; //要用微信的屌方法必须要引入这个玩意儿!!!

// 在created(){}里面就要先调用
getWeixinSDK() {
this.$sgData.weixin_mp_config(
{
url: encodeURIComponent(location.href.split("#")[0]) //最好不要包含哈希,据说包含"#"的兄弟们都阵亡了~
},
{
success: d => {
// ↓↓↓这句话是用来给马化腾打个招呼,告诉小马哥我要用你的微信内置方法了哟,么么哒~↓↓↓
wx.config({
debug: true, //非调试模式(如果为true,在手机端会弹出alert窗口)
appId: d.appId, // 必填,公众号的唯一标识
timestamp: d.timestamp, // 必填,生成签名的时间戳
nonceStr: d.nonceStr, // 必填,生成签名的随机串
signature: d.signature, // 必填,签名
jsApiList: ["getLocation","updateAppMessageShareData"] // 必填,需要使用的JS接口列表(如:要使用定位获取坐标、分享好友)
});
},
fail: d => {
this.dialog(
"获取微信SDK权限失败,请点击右上角‘…’→刷新一下,谢谢配合!"
);
} /*,error:d=> {
console.log("报错了", d);
}*/
}
);
},
// 通过微信获取手机本地坐标经纬度
getLocationByWx(callback) {
// ↓↓↓ 这句话才是正儿八经开始获取微信经纬度坐标了 ↓↓↓
wx.ready(() => {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.getLocation({
type: "wgs84", // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: d => {
var latitude = d.latitude; // 纬度,浮点数,范围为90 ~ -90
var longitude = d.longitude; // 经度,浮点数,范围为180 ~ -180。
var speed = d.speed; // 速度,以米/每秒计
var accuracy = d.accuracy; // 位置精度
this.errorLocationText =
`您目前的地理坐标偏差范围大约是${accuracy}米,您刚刚瞬时速度为${speed}米/每秒` +
(accuracy > 500 ? ",因个人设备差异,可能存在较大距离误差" : "") +
(speed > 0
? ",可能您刚刚是乘坐汽车或者自驾,目前获取的还是您前一刻的坐标位置,请稍微等待一会儿再尝试"
: "") +
"。"; //这句话是为了后面定位失败做铺垫用的
var zb = latitude + "," + longitude; //拼接“维度,经度”
callback && callback(zb);
},
fail: d => {
this.dialog(
"获取微信坐标位置失败,请点击右上角‘…’→刷新一下,谢谢配合!"
);
}
});
});
},

举报

相关推荐

0 条评论