微信h5页面调用第三方位置导航
微信h5页面拉起第三方导航应用
需要准备的:
通过微信认证的公众号
有备案过的域名
背景:微信公众号点击菜单栏跳到h5页面,需要用到导航功能
- 需求:当用户点击导航按钮时,跳转到第三方app进行导航
参考:微信公众号开发文档
步骤:
- 在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/...
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 ~ -90longitude: 114.054565, // 经度,浮点数,范围为180 ~ -180。name: '这里填写位置名', // 位置名address: '位置名的详情说明', // 地址详情说明scale: 10, // 地图缩放级别,整形值,范围从1~28。默认为最大});})
- 点击后会跳转到微信的位置页面,点击右下角的导航就能拉起第三方的导航拉!
5.微信用的是gcj02的坐标,有些地图用的是wgs84的坐标,如果出现误差比较大,可以考虑是不是传入的经纬度问题,具体的可以问度娘
以上,希望对你有所帮助,文中如果哪里写错了,欢迎指出,欢迎加我QQ讨论:32319149 :)
微信h5页面调用第三方位置导航相关推荐
- H5页面调用微信支付
1.H5页面使用微信支付,首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名.JS接口安全域名.网页授权域名.支付功能页面需在此域名链接下的页面. 2.加入域名后,就 ...
- 微信小程序web-view 外部引用h5页面调用摄像头录制视频 配有提示音
微信小程序web-view 外部引用h5页面调用摄像头录制视频 配有提示音 1.目前的需求是什么 2.都踩了那些坑 1.小程序 2.h5语音提示 3.语音合成声音录制不进去,ios有时候是麦克风,有时 ...
- H5 -- 微信h5页面中下载第三方app的方法
需求:在微信h5页面中下载第三方app -- 安卓, 直接下载apk文件包:iphone,跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX ...
- H5页面调起地图导航
h5页面拉起地图导航 • 新年快乐,在此㊗️大家万事如意,牛气冲天! 这里再次记录下, 在vue中使用百度地图,点击marker弹窗选择对应导航方式. 文章目录 h5页面拉起地图导航 效果图 拉起导航 ...
- C#开发微信门户及应用(44)--微信H5页面开发的经验总结
在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...
- h5 登录页面_一份写给新手的微信H5页面制作流程介绍
作为一种非常受欢迎的营销推广方式,H5页面具有交互性好.易于传播.感官体验丰富.利于效果追踪等优势.由于H5页面的传播主阵地是微信,所以很多刚接触H5页面的新手经常误以为H5页面只能在微信中传播,也就 ...
- 微信 H5 页面前端开发,大多数人都会遇到的几个兼容性坑
关注上方"前端开发博客",选择"设为星标" 回复"2"加入前端群 最近给公司写了微信h5业务页面,总结分享一下前端开发过程中的几个兼容性坑, ...
- 微信H5页面前端开发,大多数人都会遇到的几个兼容性坑(转载)
1.ios端兼容input光标高度 问题详情描述:input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.例如下图,左图是正常所期待的输入框光 ...
- 意派Epub360 | 制作微信H5页面的流程思路引导
H5页面其实就是一种可交互的网页,除非要在其中设置微信授权(此举是为了获取用户的微信昵称及头像信息),否则也是可以直接在浏览器中在线浏览的,既方便又不占内存.一般来说,制作H5页面的流程基本有:确认项 ...
最新文章
- Redis缓存使用技巧和设计方案
- python基础代码事例-python基础示例
- OCH\OMS\OTS\MSP\RS\SPI解释
- 数据中心机房工程建设需要注意的重大问题
- 成功解决Python的Reshape your data either using array.reshape(-1, 1) if your data has a single feature or
- 2018年湘潭大学程序设计竞赛 G又见斐波那契
- ib网卡命令_infiniband交换机配置命令总结
- js f12就关闭标签、禁止右击,感兴趣的可以看一下
- swift -懒加载创建view
- 2021北京地区高考成绩排名查询,2021年北京理科高考成绩排名一分一段表,北京理科成绩排名查询...
- 去除黄褐斑的方法,姬净美怎么样
- arcpy投影(二)——基准面变换概念及参数、空间参考对象获取、变换关系获取方法梳理与解析(Spatial Reference、ListTransformations)
- linux 函数中打印调用栈
- woocommerce-paypal-payments/modules/ppcp-button/src/Assets/SmartButton.php如何解决AVADA主题
- NR PDCP duplication
- 安全配置管理 (SCM):建立安全的基础
- 复选框的name属性
- 端粒效应《The Telemere Effect》程序员的养生指南(一)压力、端粒与衰老
- 读地质图总结(瞎写的)
- 计算机病毒手动查杀,电脑中毒了怎么办 如何手动彻底查杀病毒【解决方法】...
热门文章
- Python批量转存百度网盘资源
- 链上西游,梦幻王国NFT西游“财富记”
- linux命令总结dd命令详解
- 购袖珍电子计算机笔记本,袖珍笔记本电脑制作教程
- 嗑技热点 | 微信豆、连麦、美颜集体亮相,视频号大更新!
- 微信红包算法代码实现
- oracle日期修改格式,Oracle 修改默认日期格式
- python 随机种子 时间_关于python中的随机种子——random_state
- 几款常用的SSH工具
- VS2019 无法打开包括文件“GL/gl.h“