微信js-sdk获取用户位置信息(经纬度)

官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#36

js:

$.ajax({
                url: "/wx/getInfoMation",
                type: "post",
                data: {url:link},
                dataType: "json",
                success: function (data) {
                    var datad = data.data;
                    console.log(datad.appid)
                    wx.config({
                        debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
                        appId: datad.appid, // 必填,公众号的唯一标识
                        timestamp: datad.timestamp, // 必填,生成签名的时间戳
                        nonceStr: datad.noncestr, // 必填,生成签名的随机串
                        signature: datad.signature,// 必填,签名,见附录1
                        jsApiList: [
                            "getLocation"
                        ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
                    });
                    wx.ready(function(){
                        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
                        wx.getLocation({
                            type: 'gcj02', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
                            success: function (res) {
                                var latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
                                var longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
                                var speed = res.speed; // 速度,以米/每秒计
                                var accuracy = res.accuracy; // 位置精度
                                console.log(latitude)
                                console.log(longitude)
                                $("#lat").val(latitude);
                                $("#lng").val(longitude);
                                //取消loading遮罩层
                                this.show=false;
                            }
                        });
                    });
                    wx.error(function (res) {
                        layer.msg(res);
                    });
                },
                error: function (error) {
                    layer.msg(error)
                }
            });

controller:

@RequestMapping(value = "/getInfoMation", method = RequestMethod.POST)
    @ResponseBody
    public JsonResult getInfoMation(HttpServletRequest request,String url) throws Exception {

        logger.info("----获取微信config签名信息---url--:"+url);
        //获取access_token
        String tokenInfo = HttpClientUtils.httpGetRequest("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+wxAppid+"&secret="+wxSecret,"UTF-8");
        JSONObject wxTokenResponse = JSONObject.parseObject(tokenInfo);
        String access_token = wxTokenResponse.get("access_token").toString();

        //获取ticket
        String jsapi_ticket = "";
        String ticketInfo = HttpClientUtils.httpGetRequest("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+access_token+"&type=jsapi","UTF-8");
        JSONObject wxResponse = JSONObject.parseObject(ticketInfo);
        if (!wxResponse.get("errcode").toString().equals("0")) {
            logger.info("-----获取ticket失败-----");
            return JsonResult.error();
        }
        logger.info("---code-----" + JSON.toJSONString(wxResponse));
        //获取jsapi_ticket
        jsapi_ticket = wxResponse.get("ticket").toString();

        //获取随机字符串
        String noncestr = RandomStringUtils.random(15, new char[]{
                'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
                'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
                '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
        });
        //生成时间戳(需要单位  /秒)
        long timestamp1 = Calendar.getInstance().getTimeInMillis();
        String timestampStr = String.valueOf(timestamp1);
        int length = timestampStr.length();
        long timestamp = Long.valueOf(timestampStr.substring(0, length - 3));

        //拼接签名字段
        StringBuilder string1Builder = new StringBuilder();
        string1Builder.append("jsapi_ticket=").append(jsapi_ticket).append("&")
                .append("noncestr=").append(noncestr).append("&")
                .append("timestamp=").append(timestamp).append("&")
                .append("url=").append(url);
        logger.info("-----String1-----:"+string1Builder);
        //sha1加密
        String signature = DigestUtils.sha1Hex(string1Builder.toString());
        String res = "{\"appid\":\"" + wxAppid + "\",\"jsapi_ticket\":\"" + jsapi_ticket + "\",\"noncestr\":\"" + noncestr + "\",\"timestamp\":\"" + timestamp + "\",\"signature\":\"" + signature + "\"}";

        Map result = new HashMap();
        result.put("appid",wxAppid);
        result.put("jsapi_ticket",jsapi_ticket);
        result.put("noncestr",noncestr);
        result.put("timestamp",timestamp);
        result.put("signature",signature);

        logger.info("-----config配置信息:-----" + result);
        return JsonResult.success(result);
    }
过程中遇见的问题:

1、invalid url domain当前页面所在域名与使用的appid没有绑定,请确认正确填写绑定的域名,仅支持80(http)和443(https)两个端口,因此不需要填写端口号(一个appid可以绑定三个有效域名,见 ]目录1.1.1)。

2、invalid signature签名错误。建议按如下顺序检查:

1)、确认签名算法正确,可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。

2)、确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。

3)、确认url是页面完整的url(请在当前页面alert(location.href.split(’#’)[0])确认),包括’http(s)😕/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。

4)、确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。

5)、确保一定缓存access_token和jsapi_ticket。

6)、确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#‘hash部分的链接(可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

散装程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值