微信html5页面调用第三方位置导航的示例


Posted in HTML / CSS onMarch 14, 2018

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯CSS实现预加载动画效果
Sep 06 HTML / CSS
详解CSS3 弹性布局快速入门
Jun 06 HTML / CSS
CSS3的新特性介绍
Oct 31 HTML / CSS
CSS3 伪类选择器 nth-child()说明
Jul 10 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
用React加CSS3实现微信拆红包动画效果
Mar 13 HTML / CSS
html5使用canvas实现图片下载功能的示例代码
Aug 26 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
详解CSS不受控制的position fixed
May 25 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 #HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 #HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 #HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 #HTML / CSS
详解px单位html5响应式方案
Mar 08 #HTML / CSS
html5开发三八女王节表白神器
Mar 07 #HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 #HTML / CSS
You might like
一个查看session内容的函数
2006/10/09 PHP
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
PHP内存溢出优化代码详解
2021/02/26 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
2017/03/09 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
layui type2 通过url给iframe子页面传值的例子
2019/09/06 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
socket + select 完成伪并发操作的实例
2017/08/15 Python
Django框架模板用法入门教程
2019/11/04 Python
如何基于python实现归一化处理
2020/01/20 Python
Python内置类型性能分析过程实例
2020/01/29 Python
Python 合并拼接字符串的方法
2020/07/28 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
家庭户外服装:Hawkshead
2017/11/02 全球购物
Pottery Barn阿联酋:购买家具、家居装饰及更多
2019/12/08 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
大学生的四年学习自我评价
2013/12/13 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
员工工作能力评语
2014/12/31 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
java设计模式--三种工厂模式详解
2021/07/21 Java/Android