微信的H5页面调取第三方位置导航-

这次给大家带来微信的H5页面调取第三方位置导航，微信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。默许为最大
            });
        })

点击后会跳转到微信的位置页面,点击右下角的导航就能拉起第三方的导航拉!

信赖看了本案牍例你已经把握了办法，更多出色请关注 百分百源码网 其它相干文章！

举荐浏览：

前端技术实现文本文字纹理叠加

h5实现多图片预览上传及点击可拖拽控件

以上就是微信的H5页面调取第三方位置导航的细致内容，更多请关注 百分百源码网 其它相干文章！