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("獲取微信坐標位置失敗,請點擊右上角‘…’→刷新一下,謝謝配合!");}});});},
總結
以上是生活随笔為你收集整理的vue 编写H5页面在公众号外部获取手机本地坐标经纬度的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 判断手机是否弹出键盘,改变了手机页面高度
- 下一篇: 【fiveClick】2秒内5连击(五连