微信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中的Transition
Jul 15 HTML / CSS
CSS3的一个简单导航栏实现
Aug 03 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 HTML / CSS
深入浅析CSS3中的Flex布局整理
Apr 27 HTML / CSS
css3实现小箭头各种图形效果
Jul 08 HTML / CSS
浅谈three.js中的needsUpdate的应用
Nov 12 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
元素水平垂直居中的方式
Mar 31 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
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
在WordPress中实现评论头像的自定义默认和延迟加载
2015/11/24 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
浅谈PHP中的面向对象OOP中的魔术方法
2017/06/12 PHP
jQuery操作 input type=checkbox的实现代码
2012/06/14 Javascript
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
JavaScript实现点击按钮直接打印
2016/01/06 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
Javascript设计模式之装饰者模式详解篇
2017/01/17 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
基于Python实现文件大小输出
2016/01/11 Python
解读python logging模块的使用方法
2018/04/17 Python
Python3.6+Django2.0以上 xadmin站点的配置和使用教程图解
2019/06/04 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
什么是python的列表推导式
2020/05/26 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
对pytorch中x = x.view(x.size(0), -1) 的理解说明
2021/03/03 Python
英国受欢迎的运动鞋和街头服装商店:Footasylum
2018/06/12 全球购物
.net面试题
2016/09/17 面试题
个人找工作的自我评价
2013/10/17 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
入学生会自荐书范文
2014/02/05 职场文书
好学生评语大全
2014/05/05 职场文书
幼儿园个人总结
2015/02/28 职场文书
反腐倡廉主题教育活动总结
2015/05/07 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang
Python中的变量与常量
2021/11/11 Python
instantclient客户端 连接oracle数据库
2022/04/26 Oracle