微信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使用border-radius属性制作圆角
Dec 22 HTML / CSS
使用CSS禁止textarea调整大小功能的方法
Mar 13 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 HTML / CSS
HTML5 Canvas实现文本对齐的方法总结
Mar 24 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
HTML5中的强制下载属性download使用实例解析
May 12 HTML / CSS
boostrap modal 闪现问题的解决方法
Sep 01 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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获取数组最后一个值的2种方法
2015/01/21 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
浅析php如何实现爬取数据原理
2018/09/27 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
window.location和document.location的区别分析
2008/12/23 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
jQuery解析XML 详解及方法总结
2016/09/28 Javascript
禁用backspace网页回退功能的实现代码
2016/11/15 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
JS 在数组指定位置插入/删除数据的方法
2017/01/12 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
2017/04/20 Javascript
js读取本地文件的实例
2017/12/22 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
Python中os.path用法分析
2015/01/15 Python
python实现发送邮件功能代码
2017/12/14 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
python输出决策树图形的例子
2019/08/09 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
以设计师精品品质提供快速时尚:Mostata
2019/05/10 全球购物
2014年政协工作总结
2014/12/09 职场文书
文书工作总结(范文)
2019/07/11 职场文书
SpringAop日志找不到方法的处理
2021/06/21 Java/Android
解决Git推送错误non-fast-forward的方法
2022/06/25 Servers