微信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实现水平垂直居中效果的方法
Mar 10 HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
CSS3圆角和渐变2种常用功能详解
Jan 06 HTML / CSS
CSS3 旋转立方体问题详解
Jan 09 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5 canvas画矩形时出现边框样式不一致的解决方法
Oct 14 HTML / CSS
html5实现canvas阴影效果示例
May 07 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5的Video标签有部分MP4无法播放的问题解析(多图)
Aug 18 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 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
新52大事件
2020/03/03 欧美动漫
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
PHP获取数组中指定的一列实例
2017/12/27 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
2014/04/29 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
2018/02/05 Javascript
简单的vuex 的使用案例笔记
2018/04/13 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python模块/包/库安装的六种方法及区别
2020/02/24 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
CSS3 3D旋转rotate效果实例介绍
2016/05/03 HTML / CSS
ABOUT YOU罗马尼亚:超过600个时尚品牌
2019/09/19 全球购物
简述DNS进行域名解析的过程
2013/12/02 面试题
优秀共产党员先进事迹
2014/01/27 职场文书
《夹竹桃》教学反思
2014/04/20 职场文书
好学生评语大全
2014/05/05 职场文书
干部竞争上岗演讲稿
2014/09/11 职场文书
总经理检讨书范文
2015/02/16 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书