微信html5页面调用第三方位置导航的示例
发布时间:2018-03-14 15:25:36 作者:飞燕
我要评论
这篇文章主要介绍了微信html5页面调用第三方位置导航的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
微信h5页面拉起第三方导航应用
需要准备的:
- 通过微信认证的公众号
- 有备案过的域名
背景:微信公众号点击菜单栏跳到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页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
这篇文章主要介绍了HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码,需要的朋友可以参考下2018-03-02
本篇文章给大家分享基于html和CSS3制作酷炫的导航栏,效果非常美观,需要的朋友可以从参考下2015-09-23- 这篇文章主要介绍了使用jquery实现HTML5响应式导航菜单的方法,需要的朋友可以参考下2014-04-02
- 使用纯CSS来实现的一个响应式导航菜单,我们使用的是HTML5+CSS3技术,当浏览器窗口变小或者使用手机浏览器访问的时候,原本横条菜单会收缩成一个下拉菜单,当鼠标滑向菜单2014-02-12
- 下拉导航在浏览网页时经常会遇见到,记得以前都是使用js实现的吧,不过本文接下来要介绍的是采用css3+html5实现,感兴趣的你可不要错过了哈,希望看完对你学习css3有所帮助2013-03-18



最新评论