微信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 相关文章推荐
css3发光搜索表单分享
Apr 11 HTML / CSS
利用SVG和CSS3来实现一个炫酷的边框动画
Jul 22 HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
使用phonegap操作数据库的实现方法
Mar 31 HTML / CSS
HTML5实现直播间评论滚动效果的代码
May 27 HTML / CSS
使用Html5 Stream开发实时监控系统
Jun 02 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
JAVA/JSP学习系列之二
2006/10/09 PHP
PHP用户指南-cookies部分
2006/10/09 PHP
慎用preg_replace危险的/e修饰符(一句话后门常用)
2013/06/19 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
laravel5.6框架操作数据curd写法(查询构建器)实例分析
2020/01/26 PHP
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
招聘网站基于jQuery实现自动刷新简历
2015/05/10 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
基于JavaScript实现一个简单的Vue
2018/09/26 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
关于uniApp editor微信滑动问题
2021/01/15 Javascript
忘记ftp密码使用python ftplib库暴力破解密码的方法示例
2014/01/22 Python
对于Python装饰器使用的一些建议
2015/06/03 Python
Python实现文件复制删除
2016/04/19 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Django中create和save方法的不同
2019/08/13 Python
python 读取数据库并绘图的实例
2019/12/03 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
Moss Bros官网:英国排名第一的西装店
2020/02/26 全球购物
出纳员的岗位职责
2014/02/22 职场文书
解放思想演讲稿
2014/09/11 职场文书
离婚起诉书范本
2015/05/18 职场文书
python 实现体质指数BMI计算
2021/05/26 Python
详解如何用Python实现感知器算法
2021/06/18 Python