微信的H5頁面呼叫第三方位置導航

這次帶給大家微信的H5頁面呼叫第三方位置導航，微信H5頁面呼叫第三方位置導航的注意事項有哪些，以下就是實戰案例，一起來看一下。

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

需要準備的:

1. #通過微信認證的公眾號碼

2. 有備案過的網域名稱

背景:微信公眾號點擊選單列跳到h5頁面,需要用到導航功能

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

參考:微信公眾號開發文件

#步驟:

在需要呼叫JS介面的頁面引入如下JS文件，（支援https）：http://res.wx.qq.com/cgi-bin/index?lang=zh_CN

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裡要填你要使用的介面,不然沒有作用

給導航按鈕註冊點擊事件,呼叫wx.openLocation方法

$('.btn2').click(function () {
            wx.openLocation({
                latitude: 22.545538, // 纬度，浮点数，范围为90 ~ -90
                longitude: 114.054565, // 经度，浮点数，范围为180 ~ -180。
                name: '这里填写位置名', // 位置名
                address: '位置名的详情说明', // 地址详情说明
                scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大
            });
        })

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

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

前端技術實現文字文字紋理疊加

#h5實現多圖片預覽上傳及點擊可拖拽控件

以上是微信的H5頁面呼叫第三方位置導航的詳細內容。更多資訊請關注PHP中文網其他相關文章！