微信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中的content属性使用示例
Jul 20 HTML / CSS
解决margin 外边距合并问题
Jul 03 HTML / CSS
有关HTML5 Video对象的ontimeupdate事件(Chrome上无效)的问题
Jul 19 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
HTML5中Localstorage的使用教程
Jul 09 HTML / CSS
HTML5新特性之语义化标签
Oct 31 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 HTML / CSS
用canvas做一个DVD待机动画的实现代码
Apr 12 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS使用SVG实现动态分布的圆环发散路径动画
Dec 24 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中调用ASP.NET的WebService的代码
2011/04/22 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
PHP实现Huffman编码/解码的示例代码
2018/04/20 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
利用ajaxfileupload插件实现文件上传无刷新的具体方法
2013/06/08 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
从js向Action传中文参数出现乱码问题的解决方法
2013/12/29 Javascript
JQuery与JS里submit()的区别示例介绍
2014/02/17 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
AngularJS Ajax详解及示例代码
2016/08/17 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
vue加载自定义的js文件方法
2018/03/13 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
vue-cli点击实现全屏功能
2020/03/07 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
详解Django中间件执行顺序
2018/07/16 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
python基于递归解决背包问题详解
2019/07/03 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
15款Python编辑器的优缺点,别再问我“选什么编辑器”啦
2020/10/19 Python
苹果音乐订阅:Apple Music
2018/08/02 全球购物
工商管理毕业生推荐信
2013/12/24 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
年终晚会主持词
2014/03/25 职场文书
人事任命通知
2015/04/20 职场文书
DSP接收机前端设想
2022/04/05 无线电
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技