微信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字体效果的设置方法小结
Jun 13 HTML / CSS
使用CSS实现阅读进度条
Feb 27 HTML / CSS
详解CSS3 Media Queries中媒体属性的使用
Feb 29 HTML / CSS
CSS3实现同时执行倾斜和旋转的动画效果
Oct 27 HTML / CSS
HTML5的文档结构和新增标签完全解析
Apr 21 HTML / CSS
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
Dec 13 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
Apr 24 HTML / CSS
html5 视频播放解决方案
Nov 06 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
Aug 19 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
PHP+JS无限级可伸缩菜单详解(简单易懂)
2007/01/02 PHP
php学习 函数 课件
2008/06/15 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
Js获取当前日期时间及格式化代码
2016/09/17 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
vue的事件绑定与方法详解
2017/08/16 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
vue+echarts实现可拖动节点的折线图(支持拖动方向和上下限的设置)
2019/04/12 Javascript
python教程之用py2exe将PY文件转成EXE文件
2014/06/12 Python
Python中的zip函数使用示例
2015/01/29 Python
Python中内建函数的简单用法说明
2016/05/05 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Python进程间通信Queue消息队列用法分析
2019/05/22 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
基于Python绘制美观动态圆环图、饼图
2020/06/03 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
7 For All Mankind官网:美国加州洛杉矶的高级牛仔服装品牌
2018/12/20 全球购物
优秀员工推荐信
2014/05/10 职场文书
六一儿童节开幕词
2015/01/29 职场文书
学雷锋团日活动总结
2015/05/06 职场文书
办公经费申请报告
2015/05/15 职场文书
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL