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

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

 

1、必须先注册个公众号,且认证后去下面这个地方配置好您的域名这仨地方都得设置,目前我试了下用域名还是用具体项目所在的文件夹目录没什么明显差异

 

譬如你是用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 ~ -90var 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("获取微信坐标位置失败,请点击右上角‘…’→刷新一下,谢谢配合!");}});});},

更多相关:

  • 我的列表有20个坐标(x和y坐标).我可以计算任意两个坐标之间的距离,但是我很难编写一个算法来迭代列表并计算第一个节点和每个其他节点之间的距离.例如,ListOfCoordinates = [(1,2), (3,4), (5,6), (7,8), (9,10), (11,12)]在这种情况下,我需要一个for循环,它将整合列表并计算第...

  • 函数功能:该函数返回表示屏幕坐标下光标位置的长整数值。此位置表示当上一消息由GetMessage取得时鼠标占用的点。    函数原型:DWORD GetMessagePos(VOID)    参数:无。    返回值:返回值给出光标位置的X,y坐标。X坐标在低位整数,y坐标在高位整数。    备 注:如前所述,X坐标在返回值的低位整数...

  • 导读:微信是我们生活中必不可少的聊天工具,但是人们在日常生活中经常会有工作微信和生活微信分开的情况,目前很多安卓机支持一键双开,但是电脑端却锁定只允许打开一个;本文将重点介绍Win 10实现微信多开的几种方法,希望给大家带来帮助。文/黑七方法一:同一电脑多客户端登录此类方案最安全,适用于win10系统。1、安装微信客户端一大多电脑已经...

  •   依次排查: 1、menifest.json中配置了微信的appid是不是微信开放平台(微信开放平台)对应的APP id,包名是否和微信开放平台对应APP的包名一致(com.******.app) 2、服务端请求prepareid是否正确返回 3、服务端返回数据格式与官方是否一致(还有你的付款金额不能低于0.01元也就是不能...

  • 以前我开过一些帖子,我们内部也做过一些讨论,我们从张小龙的碎屏图中   ,发现了重要讯息: 1:微信支付将成为重要场景; 2:这些应用与春节关系不小,很多应用在春节时,有重要的场景开启可能性; 3:春节是一个重要的推广时机,非常适合推广,微信应该不会错过这个时机; 4:春节前需要做好准备,那么预留一定的天数是必要的,10-15天是...

  •   据证券时报消息,腾讯携手康佳推微信电视,具有微信传屏、微信弹幕、微信遥控等基于腾讯微信平台的电视功能。想了吧?别急,11月5日,微信互联电视将在康佳全国终端门店全部上线。微信电视2.0版将新增语音搜索、节目单分享推荐自定义等  微信传屏功能在哪里找? 昨日,康佳集团在深圳总部展厅举行了“易TV微信互联电视品鉴会”,并宣布易...

  • 微信公众平台开发 微信公众平台开发模式 企业微信公众平台 微信一站到底 在线答题 在线做题 作者:方倍工作室 原文: http://www.cnblogs.com/txw1958/archive/2013/06/11/wechat38-online_answer.html 微信一站到底 在线答题 在线做题 方倍工作室 一站到底题库...

  • 经常我们在测试接口的返回报文的时候,可能是存在于不同网页的跳转过程中,但是浏览器默认的设置是只要一跳转页面,上一个页面的请求记录就没了,是不是很烦人,有时候我们还有以迅雷不及掩耳盗铃之势把浏览器的接口监听按钮暂停掉,或者截屏,非常的难受,于是这样设置一下,切换页面的跳转情况下,接口记录依旧会保存了  ...

  • 《团队合作大坑合集》_←你挚爱的强哥→的博客-CSDN博客1、百分号无限循环小数2、小数四舍五入计算错误3、写死了年份导致跨年无法选择最新年份4、悄悄修改内外网访问限制导致外网接口不能访问5、定位索引城市的地理坐标,定位到了同名的其他城市6、更新包的时候没传完就关电脑7、前后端绑定字段不统一,字段类型不统一...https://s-z...

  • 文章目录1. 基本的多态实现2. 空接口与断言3. Go接口的最佳实践...

  • lambada 表达式实质上是一个匿名方法,但该方法并非独立执行,而是用于实现由函数式接口定义的唯一抽象方法使用 lambda 表达式时,会创建实现了函数式接口的一个匿名类实例可以将 lambda 表达式视为一个对象,可以将其作为参数传递1. 函数式接口 函数式接口是仅含一个抽象方法的接口,但可以指定 Object 定义的任何公有...

  • 接口是双方约定的一种合作协议。接口实现者不需要关心接口会被怎样使用,调用者也不需要关心接口的实现细节。 接口是一种类型,也是一种抽象结构,不会暴露所含数据的格式、类型及结构。   声明: 接口类型是由一组方法签名定义的集合 type 接口类型名 interface{ 方法名1( 参数列表1 ) 返回值列表1 方法名2( 参数列表2 )...