微信h5頁面調用第三方位置導航

微信h5頁面拉起第三方導航應用

須要準備的:

經過微信認證的公衆號
有備案過的域名

• 背景:微信公衆號點擊菜單欄跳到h5頁面,須要用到導航功能

• 需求:當用戶點擊導航按鈕時,跳轉到第三方app進行導航

  參考:微信公衆號開發文檔

步驟:

1. 在須要調用JS接口的頁面引入以下JS文件，（支持https）：http://res.wx.qq.com/open/js/...

2. jssdk的簽名權限,這個權限是由後臺提供的,前端只須要把簽名權限注入到wx.config中就能夠了,相信用過微信其餘api的這一步均可以省了

   ```
          wx.config({
              debug: true, // 開啓調試模式,調用的全部api的返回值會在客戶端alert出來，若要查看傳入的參數，能夠在pc端打開，參數信息會經過log打出，僅在pc端時纔會打印。
              appId: '', // 必填，公衆號的惟一標識
              timestamp: , // 必填，生成簽名的時間戳
              nonceStr: '', // 必填，生成簽名的隨機串
              signature: '',// 必填，簽名
              jsApiList: ['openLocation'] // 必填，須要使用的JS接口列表 這裏填寫須要用到的微信api openlocation爲使用微信內置地圖查看位置接口
          });
          ```

   這裏須要注意的地方debug在上線後要改成false,jsApiList裏要填你要使用的接口,否則沒有做用

3. 給導航按鈕註冊點擊事件,調用wx.openLocation方法

   $('.btn2').click(function () {
               wx.openLocation({
                   latitude: 22.545538, // 緯度，浮點數，範圍爲90 ~ -90
                   longitude: 114.054565, // 經度，浮點數，範圍爲180 ~ -180。
                   name: '這裏填寫位置名', // 位置名
                   address: '位置名的詳情說明', // 地址詳情說明
                   scale: 10, // 地圖縮放級別,整形值,範圍從1~28。默認爲最大
               });
           })

4. 點擊後會跳轉到微信的位置頁面,點擊右下角的導航就能拉起第三方的導航拉!
   

5.微信用的是gcj02的座標,有些地圖用的是wgs84的座標,若是出現偏差比較大,能夠考慮是否是傳入的經緯度問題,具體的能夠問度娘

以上,但願對你有所幫助,文中若是哪裏寫錯了,歡迎指出,歡迎加我QQ討論:32319149 :)