微信公众号怎么获取用户地理位置

本篇文章实现效果如下:

用户点击微信公众号底部【校区位置】菜单,打开应用页面,该页面中调用微信JSSDK打开微信内置地图,并设置目标地点(叩丁狼教育校区),此时可看到用户当前位置与目标地点位置的距离,还可通过右下角绿色按钮,调用百度地图等第三方软件,点击后会自动设置用户的位置作为起点,目标地点作为终点,自动查询方案路线。

微信公众号开发之获取用户地理位置和微信内置地图操作

实现步骤

一:绑定域名

微信公众号开发之获取用户地理位置和微信内置地图操作

实现具体流程可参考该文章***/p/85573685f17d

我使用的菜单json数据为:

{ "button": [ { "type": "click", "name": "课程学习", "key": "course" }, { "type": "click", "name": "就业资讯", "key": "JAVA" }, { "type": "view", "name": "校区位置", "url": "***/location.do" } ]}

三:Controller代码

主要是根据指定的算法,生成并提供微信规定的参数给页面。

若对微信JS-SDK不了解的同学可先参考该文章:***/p/b3c4450f845e

@Controllerpublic class LocationController { @RequestMapping("location") public String location(Model model,HttpServletRequest request) throws Exception { //32位随机数(UUID去掉-就是32位的) String uuid = UUID.randomUUID().toString().replace("-", ""); //jssdk权限验证参数 TreeMap<Object, Object> map = new TreeMap<>(); map.put("appId",WeChatUtil.APPID); long timestamp = new Date().getTime(); map.put("timestamp",timestamp);//全小写 map.put("nonceStr",uuid); map.put("signature",WeChatUtil.getSignature(timestamp,uuid,RequestUtil.getUrl(request))); model.addAttribute("configMap",map); return "location"; //视图页面 }}

参数介绍

timestamp:必填,时间戳

nonceStr:必填,随机生成的字符串

signature:必填,根据timestamp与nonceStr与jsapi_ticket按照某种算法生成的签名

官方文档参考:

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 (附录1-JS-SDK使用权限签名算法)

生成签名的工具方法:

 public static String getSignature(Long timestamp,String noncestr,String url ){ //对所有待签名参数按照字段名的ASCII 码从小到大排序(字典序) Map<String,Object> map = new TreeMap<>(); map.put("jsapi_ticket",getJsapi_ticket()); map.put("timestamp",timestamp); map.put("noncestr",noncestr); map.put("url",url); //使用URL键值对的格式(即key1=value1&key2=value2…)拼接成字符串string1 StringBuilder sb = new StringBuilder(); Set<String> set = map.keySet(); for (String key : set) { sb.append(key+"="+map.get(key)).append("&"); } //去掉最后一个&符号 String temp = sb.substring(0,sb.length()-1); //使用sha1加密 return SecurityUtil.SHA1(temp); }

jsapi_ticket:

生成签名signature还需要一个叫jsapi_ticket的参数,jsapi_ticket是公众号用于调用微信JS接口的临时票据,可以通过基础接口的access_token来获取,有效期为7200秒,调用次数有限,所以在后台也需要全局缓存jsapi_ticket。

代码:

//获取JSSDK的接口地址public static final String GET_TICKET_URL = "***/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";/*** 获取JSSDK的jsapi_ticket*/public static void getJsapi_ticket(){ //发起请求到指定的接口 String result = ***ESS_TOKEN",getAccessToken())); System.out.println(result);}

getAccessToken是之前开发教程(四)已经实现好的,有需要的可参考***/p/85573685f17d

三:页面中引入JS文件

<script src="***/open/js/jweixin-1.2.0.js"></script>

四:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用JSSDK的相关API。

在页面中添加这段js代码

wx.config({ debug: false, // 开启调试模式 appId: '${configMap.appId}', // 公众号的唯一标识 timestamp: '${configMap.timestamp}', // 生成签名的时间戳 nonceStr: '${configMap.nonceStr}', // 生成签名的随机串 signature: '${configMap.signature}',// 签名 jsApiList: ['openLocation'] // 这里先声明我们要用到打开地图的JS接口});

参数介绍

debug:true为开启调试模式,调用的所有api的返回值会在客户端alert出来,若是生产环境则设置为false

jsApiList:必填,在里面声明我们需要使用到的JS接口权限

五:通过ready接口处理成功验证

config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

最后添加以下js代码即可:

wx.ready(function(){ wx.openLocation({ latitude:23.132006, // 纬度,浮点数,范围为90 ~ -90 longitude:113.377785, // 经度,浮点数,范围为180 ~ -180。 name: '叩丁狼教育', // 位置名 address: '专业IT培训', // 地址详情说明 scale: 25, // 地图缩放级别,整形值,范围从1~28。默认为最大 infoUrl: '***/' // 在查看位置界面底部显示的超链接,可点击跳转 });});

latitude与longitude是目标地点的经纬度坐标,可以使用腾讯地图提供的坐标拾取器

***/tool/getpoint/ 搜索指定地点即可获取。

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:dandanxi6@qq.com

(0)
上一篇 2023年 8月 27日 下午1:06
下一篇 2023年 8月 27日 下午1:25

相关推荐

  • 摩拜和滴滴要开战了,ofo怎么办

    摩拜对自行车之外“大出行”的兴趣越来越浓郁。与首汽约车互通App之后,摩拜近日又与嘀嗒拼车等展开洽谈,甚至成立了专门的出行服务公司。原本已经趋于稳定的网约车领域,由于与共享单车领域…

    2023年 4月 28日
  • 腾讯个人隐私保护指引是什么

    IT之家11月13日消息 日前,QQ上线隐私保护指引,公开了详细权限使用规则,包括相机、联系人、健康、地理位置、麦克风、相册与提醒等方面。目前,iOS与安卓用户均可通过设置-关于Q…

    2022年 12月 20日
  • 让老公退出他自己的家庭群

    导语: 在现代社会中,社交媒体成为了人们交流的重要平台,人们可以通过各种社交群体与朋友、家人和同事保持联系。然而,有时候在这些群体中出现一些问题,需要我们做出一些决策。本文将探讨一…

    2023年 6月 7日
  • 收款语音播报器怎么连接,收款语音播报器怎么连接大音响

    收款语音播报器怎么连接,二维码收款语音播报器怎么申请,在现代快速发展的社会中,移动支付已经成为越来越普遍的收款方式。随着移动支付的普及,越来越多的商户开始采用二维码收款作为主要的支…

    2023年 10月 15日
  • steam可不可以用微信扫码支付

    今日,Steam国区正式加入微信支付方式,玩家可通过微信扫码直接购买游戏了。 在此之前,Steam国区一度有过支持支付宝结算的美好时光,只是这项服务几乎一直处于半瘫。 支付宝在表面…

    2023年 8月 2日
  • 蚂蚁森林守护地期限是什么意思

    2016年,蚂蚁森林诞生初期,鲜为人知。 经过几年的努力,到2019年,蚂蚁森林上线由全国绿化委员会办公室和中国绿化基金会发放的“全民义务植树尽责证书”,短短四个月时间,蚂蚁森林用…

    2023年 2月 21日
  • 世界最牛动画设计专业(动画设计日本学校)

    今天是世界动画日 你是否还记得小时候看过的经典动画呢 随着动画产业的发展 好作品也层出不穷 动画设计专业是怎样的 一起来了解一下吧 简介 动画设计专业,是培养动画设计人才的专业。动…

    2023年 1月 4日
  • 关于声卡调试的书籍有哪些(调试声卡)

    关于声卡调试的流程。 关于声卡调试流程问题,有很多小伙伴都不知道声卡应该怎么去调,是一个什么样的流程。也有很多人问我声卡应该怎么调,如何进行调试?我今天给你们大致的讲解一下声卡调试…

    2023年 7月 31日
  • qq无保号怎么快速上保,qq申诉技巧教程绝对成功

    申诉技巧(号码无保快速上保方法) 关于无保和一代号码,申诉的几个要点! 1,凡是你不知道的资料,例如那些,一代有证扣扣号,号码买了以后就绑定有邮箱和#S#F证的,在申诉的时候,不知…

    2023年 2月 28日
  • 桌面的百度搜索(vivo手机桌面添加百度搜索栏)

    今天要介绍一个电脑应用: 桌面百度 不要被名字迷惑 它可不是拿来设置桌面壁纸之类的 它是一个轻量级的电脑桌面应用 主要功能就是: 让你百度搜索更简便智能。 下载安装之后 打开就是一…

    2023年 11月 18日