码迷,mamicode.com
首页 > 微信 > 详细

微信接口调用百度地图api实现微信公众号打卡

时间:2019-07-20 21:13:51      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:form   微信公众号   url   mat   mic   reader   turn   result   记录   

前言

因最近给的需求要在微信公众号完成考勤打卡,刚开始说根据员工连接公司的wifi去判断,网上查了下java好像没得这个功能,所以只能选择在地图来完成。

本人也是第一次接触微信公众号,所以刚开始动手比较困难,好在经过一番摸索还是完成了。这里记录下自己的地图方案。

 

准备工作

既然是微信公众号肯定是基于微信接口的,也不用想的那么复杂,其实就是基于前台weui样式+微信js接口。下面详细说明步骤。

首先需要在公众号设置功能设置中配置微信公众号js接口安全域名

技术图片

按流程把文件放在项目工程静态资源下

技术图片

另外在基本配置中查看开发者密码后设置IP白名单,否则后续调用jssdk会报自身IP不在白名单内的错误

 

获取微信接口回调的数据

public class GetWeChatUtil {    
    public static final String wechat_token_url = "https://api.weixin.qq.com/cgi-bin/token"

    public static final String wechat_appid = "xxx";
    
    public static final String wechat_secret = "xxx";
    
    public static final String wechat_token_grant_type = "client_credential";
    
    public static final String wechat_jsapi_ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket";
    
    public static final String wechat_jsapi_ticket_type = "jsapi";

    public static Map<String,Object> getWeChatToken(){
        Map<String,Object> map = new HashMap<>();        
        try {
            Map<String,String> params = new HashMap<String, String>();
            String ss = HttpConnectionUtil.httpsSendPost(wechat_token_url+"?grant_type="+wechat_token_grant_type
              +"&appid="+wechat_appid+"&secret="+wechat_secret, null, "", "UTF-8", null); System.out.println("----获取token返回信息:"+ss); JSONObject json = JSONObject.parseObject(ss); if(json.containsKey("access_token")){ map.put("token", json.get("access_token")); map.put("expires", json.get("expires_in")); } } catch (Exception e) { e.printStackTrace(); } return map; } public static Map<String,Object> getJsapiTicket(String token) { Map<String,Object> map = new HashMap<String, Object>(); try { Map<String,String> params = new HashMap<>(); params.put("access_token", token); params.put("type", "jsapi"); String ss = HttpConnectionUtil.httpsSendPost(wechat_jsapi_ticket_url + "?access_token=" + token + "&type=" + wechat_jsapi_ticket_type, null, "", "UTF-8", null); System.out.println("----获取JsapiTicket返回信息:"+ss); JSONObject json = JSONObject.parseObject(ss); if (json.getIntValue("errcode") == 0) { map.put("ticket", json.get("ticket")); map.put("expires", json.get("expires_in")); } }catch (Exception e) { e.printStackTrace(); } return map; } public static Map<String, String> sign(String jsapi_ticket, String url) { Map<String, String> ret = new HashMap<>(); String nonce_str = create_nonce_str(); String timestamp = create_timestamp(); String string1; String signature = ""; string1 = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonce_str + "&timestamp=" + timestamp + "&url=" + url; try { MessageDigest crypt = MessageDigest.getInstance("SHA-1"); crypt.reset(); crypt.update(string1.getBytes("UTF-8")); signature = byteToHex(crypt.digest()); } catch (NoSuchAlgorithmException e) { e.printStackTrace(); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } ret.put("url", url); ret.put("jsapi_ticket", jsapi_ticket); ret.put("nonceStr", nonce_str); ret.put("timestamp", timestamp); ret.put("signature", signature); return ret; } private static String byteToHex(final byte[] hash) { Formatter formatter = new Formatter(); for (byte b : hash) { formatter.format("%02x", b); } String result = formatter.toString(); formatter.close(); return result; } private static String create_nonce_str() { return UUID.randomUUID().toString(); } private static String create_timestamp() { return Long.toString(System.currentTimeMillis() / 1000); } }

 

返回给前端调用微信接口必要参数

@Resource
private RedisTemplate<String,String> redisTemplate;

@RequestMapping("getwechatparams")
@ResponseBody
public Map<String,String> getParams(@RequestParam String url) {
    if (redisTemplate.opsForValue().get("token") == null) {
        Map<String,Object> map = GetWeChatUtil.getWeChatToken();
    if (map.get("token") != null) {
        redisTemplate
        .opsForValue()
        .set("token", map.get("token").toString(), 
            Long.parseLong(map.get("expires").toString()), TimeUnit.SECONDS);
    }
    }
    System.out.println("-----getWeToken:"+redisTemplate.opsForValue().get("token"));
    if (redisTemplate.opsForValue().get("ticket") == null) {
    Map<String,Object> mm = GetWeChatUtil.getJsapiTicket(redisTemplate.opsForValue().get("token"));
    if (mm.get("ticket") != null) {
        redisTemplate
        .opsForValue()
        .set("ticket", mm.get("ticket").toString(), 
            Long.parseLong(mm.get("expires").toString()), TimeUnit.SECONDS);
    }
    }
    System.out.println("-----getWeTicket:"+redisTemplate.opsForValue().get("ticket"));
        String weTicket = redisTemplate.opsForValue().get("ticket");
    Map<String, String> ret = GetWeChatUtil.sign(weTicket, url);
    ret.put("appId", GetWeChatUtil.wechat_appid);
    return ret;
}

 

前端百度地图显示

这里就只贴显示地图的关键性代码

1 <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=ak密匙"></script>
2 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
3 
4 <div id="allmap" style="width: 100%; height: 410px;"></div>

这里需要调用wx.getLocation()回调成功后的参数res中存放的是当前自身的GPS经纬度坐标,需要将GPS坐标系通过百度接口转换成百度坐标系

 

$(function () {
    $.ajax({
        async: false,
        url: "/getwechatparams",
        type: "POST",
        data: {
            "url": window.location.href
        },
        dataType: "json",
        success: function (bal) {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
                appId: bal.appId, // 必填,公众号的唯一标识
                timestamp: bal.timestamp, // 必填,生成签名的时间戳
                nonceStr: bal.nonceStr, // 必填,生成签名的随机串
                signature: bal.signature,// 必填,签名,见附录1
                jsApiList: [‘openLocation‘, ‘getLocation‘] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });
            wx.ready(function () {
                wx.getLocation({    // 获取微信接口中的当前坐标经纬度
                    type: ‘wgs84‘,  // GPS坐标
                    success: function (res) {
                        //alert("gps转换前:" + res.longitude + "," + res.latitude)

                        var lnggg = ‘‘;  // 经度
                        var lattt = ‘‘;  // 纬度
                        var coordinate = ‘‘;  // 签到地点坐标

                        $.ajax({
                            async: false,
                            url: "/get/location",
                            data: {
                                "longitude": res.longitude,
                                "latitude": res.latitude
                            },
                            dataType: ‘json‘,
                            success: function (responseData) {
                                lnggg = responseData.obj.lng;
                                lattt = responseData.obj.lat;
                            },
                            error: function (responseData) {
                                alert(responseData.msg);
                            }
                        });

                        // 百度地图API功能
                        var map = new BMap.Map("allmap");
                        map.enableScrollWheelZoom(true);

                        //alert("gps转换后" + lnggg + ‘,‘ + lattt);
                        var point = new BMap.Point(lnggg, lattt);

                        var geo = new BMap.Geocoder();
                        geo.getLocation(point, function (rs) {
                            var addComp = rs.addressComponents;
                            var address = addComp.city + addComp.district + addComp.street;  // 当前自身详情街道地址
                            //alert(address)
                        });

                        var geolocation = new BMap.Geolocation();
                        geolocation.getCurrentPosition(function (r) {
                            r.point.lng = lnggg;
                            r.point.lat = lattt;
                            //alert("r.point.lng:" + r.point.lng + ",r.point.lat:" + r.point.lat);
                            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
                                var mk = new BMap.Marker(r.point); // 创建标注
                                map.addOverlay(mk); // 将标注小红点添加到地图中
                                map.centerAndZoom(r.point, 16); // 缩放级别16
                                map.panTo(r.point);

                                coordinate = "116.40213223,40.10213223";    // 签到地点坐标
                                var arr = coordinate.split(",");
                                var lon = arr[0];
                                var latt = arr[1];
                                var pointAttendance = new BMap.Point(lon, latt);
                                r.point.lng = lon;
                                r.point.lat = latt;
                                var mk2 = new BMap.Marker(r.point);
                                var label = new BMap.Label("显示的文字", {offset: new BMap.Size(20, -10)});
                                mk2.setLabel(label);
                                map.addOverlay(mk2);
                                map.addOverlay(pointAttendance);
                                mk2.setAnimation(BMAP_ANIMATION_BOUNCE); // 点跳动,没反应

                                circle = new BMap.Circle(pointAttendance, 200, {
                                    fillColor: "blue",
                                    strokeWeight: 1,
                                    fillOpacity: 0.2,
                                    strokeOpacity: 0.2
                                });// 显示签到点的位置(半径为200米的一个圆)
                                map.addOverlay(circle);

                                //计算当前位置与考勤点距离
                                var distance = map.getDistance(pointAttendance, point).toFixed(2);
                                //alert("距离为" + distance);

                            } else {
                                switch (this.getStatus()) {
                                    case 2:
                                        $.alert("位置结果未知 获取位置失败...", "加载地图失败", function () {});
                                        break;
                                    case 3:
                                        $.alert("导航结果未知 获取位置失败...", "加载地图失败", function () {});
                                        break;
                                    case 4:
                                        $.alert("非法密钥 获取位置失败...", "加载地图失败", function () {});
                                        break;
                                    case 5:
                                        $.alert("非法请求位置 获取位置失败...", "加载地图失败", function () {});
                                        break;
                                    case 6:
                                        $.alert("sorry 当前没有权限 获取位置失败...", "加载地图失败", function () {});
                                        break;
                                    case 7:
                                        $.alert("sorry 服务不可用 获取位置失败...", "加载地图失败", function () {});
                                        break;
                                    case 8:
                                        $.alert("sorry 请求超时 获取位置失败...", "加载地图失败", function () {});
                                        break;
                                }
                            }
                        }, {
                            enableHighAccuracy: true
                        })
                    },
                    error: function () {
                        $.alert("请检查GPS网络是否正常", "加载地图失败", function () {});
                    }
                    }
                );
            });
        }
    });
});

 

GPS坐标系转百度坐标系

@RequestMapping("get/location")
@ResponseBody
public AjaxResponse getLocation(String longitude, String latitude) {
    try {
        Map<String, String> mapLocation = ScHttpRequestUtil.getWpsToBaiduLocation(longitude, latitude);
        return new AjaxResponse().setObj(mapLocation);
    } catch (IOException e) {
        log.error("{[]}", e);
        return new AjaxResponse().setMsg("地址解析错误请重试!");
    }
}

public static synchronized Map<String, String> getWpsToBaiduLocation(String longitude, String latitude) throws IOException {
    BufferedReader br = null;
    StringBuffer sb = new StringBuffer();
    URL url = new URL("http://api.map.baidu.com/ag/coord/convert?from=0&to=4&x=" + longitude + "&y=" + latitude);
    br = new BufferedReader(new InputStreamReader(url.openStream(), "utf-8"));
    String str = null;
    while ((str = br.readLine()) != null) {
        sb.append(str);
    }
    Map<String,String> map = (Map<String, String>) JSON.parse(sb.toString());

    Base64.Decoder decoder = Base64.getDecoder();

    String lng = new String(decoder.decode(map.get("x")), "utf-8");
    String lat = new String(decoder.decode(map.get("y")), "utf-8");
    Map<String, String> mapLocation = new HashMap<>();
    map.put("lng", lng);
    map.put("lat", lat);
    return map;
}

 

至此,基于微信接口实现百度地图的功能就完成了

微信接口调用百度地图api实现微信公众号打卡

标签:form   微信公众号   url   mat   mic   reader   turn   result   记录   

原文地址:https://www.cnblogs.com/swanyf/p/11207729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!