微信html5頁面如何呼叫第三方位置導航

本文主要和大家介紹了微信html5頁面調用第三方位置導航的範例的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考，希望能幫助到大家。

需要準備的:

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。默认为最大
            });
        })

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

5.微信用的是gcj02的座標,有些地圖用的是wgs84的座標,如果出現誤差比較大,可以考慮是不是傳入的經緯度問題,具體的可以問度娘

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