温馨提示×

微信html5页面如何调用第三方位置导航

发布时间:2021-06-09 11:44:56 阅读:225 作者:小新 栏目:web开发

这篇文章主要介绍了微信html5页面如何调用第三方位置导航,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

微信h6页面拉起第三方导航应用

需要准备的:

  1. 通过微信认证的公众号

  2. 有备案过的域名

背景:微信公众号点击菜单栏跳到h6页面,需要用到导航功能

需求:当用户点击导航按钮时,跳转到第三方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({
                latitude22.545538// 纬度,浮点数,范围为90 ~ -90
                longitude114.054565// 经度,浮点数,范围为180 ~ -180。
                name'这里填写位置名'// 位置名
                address'位置名的详情说明'// 地址详情说明
                scale10// 地图缩放级别,整形值,范围从1~28。默认为最大
            });
        })

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

5.微信用的是gcj02的坐标,有些地图用的是wgs84的坐标,如果出现误差比较大,可以考虑是不是传入的经纬度问题,具体的可以问度娘

感谢你能够认真阅读完这篇文章,希望小编分享的“微信html5页面如何调用第三方位置导航”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

温馨提示×

网络异常,请检查网络