【微信技术-微信公众号】------- 通过Java和JavaScript实现获取地理位置接口:wx.getLocation的使用实例【JS-SDK】

置顶皮皮冰要做大神

已于 2022-03-05 15:57:11 修改

阅读量2.4k

点赞数

分类专栏： # 微信公众号文章标签： javascript java wx.getLocation 微信公众号微信获取地理位置接口

于 2022-01-11 14:17:14 首次发布

本文链接：https://blog.csdn.net/qq_38366657/article/details/122430842

版权

微信公众号专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一，分为前端【Jquery+微信JS-SDK】、后端[Java+SpringBoot]两部部分。

1.前端:

(1).引用Jq脚本文件.

<script src="/libs/jquery/jquery-3.2.1.min.js"></script>

(2).引用微信js-sdk的脚本文件.

<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

(3).全部实例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
</head>
<body>

<script src="/libs/jquery/jquery-3.2.1.min.js"></script>
<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
    //获取当前地址;
    var hrefUrl=location.href.split('#')[0];
    //第一步:获取js-sdk的config信息
    //ajax方法是封装后的方法不要照搬 ajax方法请使用自己的
    window.fnWxMethod=function(){
        var params=[hrefUrl];
        var api="com.wx.wxGetShareData.fn_GetShareData";
        jYd.fnAjax(params,api,function (ret) {
            if(ret.success=="1"){
                var wxJson=ret.json;
                alert(JSON.stringify(wxJson));
                window.fnGetWxConfig(wxJson.appId,wxJson.timestamp,
                    wxJson.nonceStr,wxJson.signature);
            }
        });
    };
    window.fnWxMethod();
    //第二步:微信jsJDK配置
    window.fnGetWxConfig=function(appId,timestamp,nonceStr,signature){
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appId, // 必填，公众号的唯一标识
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr: nonceStr, // 必填，生成签名的随机串
            signature: signature,// 必填，签名
            jsApiList: ["chooseImage","openLocation","getLocation"] // 必填，需要使用的JS接口列表
        });
        window.fnGetWxReady();
    };
    //第三步:准备就绪
    window.fnGetWxReady=function(){
        //config 配置成功 调用
        wx.ready(function(res){
            //执行获取地图位置接口
            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; // 位置精度
                    // alert(JSON.stringify(res));
                    //打开内置微信的地图组件 查看当前位置
                    wx.openLocation({
                        latitude: latitude, // 纬度，浮点数，范围为90 ~ -90
                        longitude: longitude, // 经度，浮点数，范围为180 ~ -180。
                        name: '**高新区', // 位置名
                        address: '*****有限公司', // 地址详情说明
                        scale: 10, // 地图缩放级别,整型值,范围从1~28。默认为最大
                        infoUrl: 'http://www.baidu.com' // 在查看位置界面底部显示的超链接,可点击跳转
                    });
                },
                cancel : function(res) {
                    alert('用户拒绝授权获取地理位置');
                }
            });
        });
        //config 配置失败 调用
        wx.error(function(res){
            console.log("error");
        });
    };
</script>
</body>

2.后端:

package com.wx;
import com.alibaba.fastjson.JSONObject;
import com.imx.tool.preview.plugin.ffmpeg.ImageMetaInfo;
import org.apache.commons.httpclient.HttpClient;
import org.apache.commons.httpclient.cookie.CookiePolicy;
import org.apache.commons.httpclient.methods.GetMethod;
import org.apache.commons.httpclient.params.DefaultHttpParams;
import com.yd.edb.entity.IMXResponse;
import com.yd.edb.ticket.Ticket;
import com.yd.edb.jdbc.IDGen;
import java.io.IOException;
import static tool.HashHelper.SHA1;

public class wxGetShareData {

    private final static String ACCESS_TOKEN_URL_FULL = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=@appid&secret=@secret";
    private final static String JSAPI_TICKET="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=@accessToken&type=jsapi";
    private final static String appID="wxb9f036ddba54***";//公众号ID
    private final static String appSecret="faaa6b15be2e79beefa0d23e*****4";//公众号秘钥

    //第一步:获取AccessToken
    public String getAccessToken(String appid,String secret) {
        String result = "";
        try {
            HttpClient client = new HttpClient();
            String tokenURL = ACCESS_TOKEN_URL_FULL.replace("@appid",appid).replace("@secret",secret);
            GetMethod getMethod = new GetMethod(tokenURL);
            DefaultHttpParams.getDefaultParams().setParameter("http.protocol.cookie-policy", CookiePolicy.BROWSER_COMPATIBILITY);

            client.executeMethod(getMethod);
            result = new String(getMethod.getResponseBodyAsString().getBytes("gbk"));
            // 将数据转换成json
            JSONObject jasonObject = JSONObject.parseObject(result);
            result = (String) jasonObject.get("access_token");
            // System.out.println(result);
            getMethod.releaseConnection();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return result;
    }
    
    //第二步获取JsapiTicket
    public String getJsapiTicket(String accessToken) {
        String result = "";
        try {
            HttpClient client = new HttpClient();
            String ticketURL = JSAPI_TICKET.replace("@accessToken",accessToken);
            GetMethod getMethod = new GetMethod(ticketURL);
            DefaultHttpParams.getDefaultParams().setParameter("http.protocol.cookie-policy", CookiePolicy.BROWSER_COMPATIBILITY);

            client.executeMethod(getMethod);
            result = new String(getMethod.getResponseBodyAsString().getBytes("gbk"));
            // 将数据转换成json
            JSONObject jasonObject = JSONObject.parseObject(result);
            result = (String) jasonObject.get("ticket");
            getMethod.releaseConnection();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return result;
    }

    //第三步:通过SHA1加密方式 获取signature 及其他参数信息
    public static JSONObject fn_GetShareData(Ticket ticket,String hrefUrl)throws Throwable{
        
        try {
            
            JSONObject jsonMap=new JSONObject();
            String url=hrefUrl;
            String jsapiTicket="";//ticket
            String nonceStr=tool.IDHelper.NewGUID();//生成签名的随机串
            String signature="";//签名
              long timestamp=tool.DateTimeHelper.GetTimeStamp()/1000;//时间戳

            String accessToken=getAccessToken(appID,appSecret);
            if(accessToken.equals("")==false){
                jsapiTicket=getJsapiTicket(accessToken);
            }
            if(jsapiTicket.equals("")==false){
                String signatureSha="jsapi_ticket=@ticket&noncestr=@noncestr&timestamp=@timestamp&url=@url";
                signatureSha=signatureSha.replace("@ticket",jsapiTicket).replace("@noncestr",nonceStr)
                        .replace("@timestamp",tool.ConvertHelper.ToString(timestamp)).replace("@url",url);
                signature= SHA1(signatureSha).toLowerCase();
            }

            jsonMap.put("appId",appID);
            jsonMap.put("timestamp",timestamp);
            jsonMap.put("nonceStr",nonceStr);
            jsonMap.put("signature",signature);
          
        }catch (Exception e){

        }
        return jsonMap;
    }
}

3.【请使用微信打开使用这个必须关注当前自己开发公众号平台,用测试号就关注测试公众号，正式的用正式公众号不然会提示错误】最后效果图：

微信开发文档看详细说明:概述 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#38

另一篇文章：通过Java获取Access token信息代码示例：

【微信技术-微信公众号】-------通过Java获取Access token信息代码示例_皮皮冰要做大神-CSDN博客

另一篇文章：通过Java获取JS-SDK使用权限签名算法其中的“jsapi_ticket”信息实例代码

【微信技术-微信公众号】-------通过Java获取JS-SDK使用权限签名算法其中的“jsapi_ticket”信息实例代码_皮皮冰要做大神-CSDN博客

皮皮冰要做大神

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
【微信技术-微信公众号】------- 通过Java和JavaScript实现获取地理位置接口:wx.getLocation的使用实例【JS-SDK】

一，分为前端【Jquery+微信JS-SDK】、后端[Java+SpringBoot]两部部分。1.前端:(1).引用Jq脚本文件.<script src="/libs/jquery/jquery-3.2.1.min.js"></script>(2).引用微信js-sdk的脚本文件.<script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>(3..
复制链接

扫一扫