参考博客

http://blog.csdn.net/u013142781/article/details/50503299

主要JS 方法

wx.getLocation

获取地理位置信息传递参数

成功后返回参数

根据返回经纬度打开地理位置网页

wx.openLocation 参数设置



关键代码：


后台 - 构造微信验证消息




private static String appId = PropertiesUtil.getValue("common.properties", "app.id");


　　 
    @RequestMapping(value = "/get_jsapi_ticket")

    @ResponseBody

    public Map<String, Object> getJsapiTicket(

            HttpServletRequest request, HttpServletResponse response,

            HttpSession session, String url) throws IOException {

        Map<String, Object> jsapiSignature = createJsapiSignature(url);

        jsapiSignature.put("appId", appId);

        return jsapiSignature;

    }

    public Map<String, Object> createJsapiSignature(String url) {

        Map<String, Object> map = new HashMap<String, Object>();

        //准备参数

        String base_access_token = redisService.getBaseTokenFromRedis(appId, appSecret);

        JSONObject jsApiTicket = WeixinUtil.getJsApiTicket(base_access_token);

        String ticket = jsApiTicket.get("ticket").toString();

        String timestamp = Long.toString(System.currentTimeMillis() / 1000);

        String nonceStr = createNonceStr(16);

        //sha1加密

        String requesturl = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url;

        log.info("requesturl=" + requesturl);

        String signature = SHA1(requesturl);

        log.info("signature=" + signature);

        map.put("timestamp", timestamp);

        map.put("nonceStr", nonceStr);

        map.put("signature", signature);

        return map;

    }

    /**

     * SHA、SHA1加密

     *

     * @param str

     * @return

     */

    public static String SHA1(String str) {

        try {

            MessageDigest digest = java.security.MessageDigest

                    .getInstance("SHA-1"); //如果是SHA加密只需要将"SHA-1"改成"SHA"即可

            digest.update(str.getBytes());

            byte messageDigest[] = digest.digest();

            // Create Hex String

            StringBuffer hexStr = new StringBuffer();

            // 字节数组转换为 十六进制 数

            for (int i = 0; i < messageDigest.length; i++) {

                String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);

                if (shaHex.length() < 2) {

                    hexStr.append(0);

                }

                hexStr.append(shaHex);

            }

            return hexStr.toString();

        } catch (NoSuchAlgorithmException e) {

            e.printStackTrace();

        }

        return null;

    }

    /**

     * 构造随机字符串

     *

     * @param length

     * @return

     */

    private static String createNonceStr(int length) {

        String baseStr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

        StringBuffer temp = new StringBuffer();

        Random random = new Random();

        for (int i = 0; i < length; i++) {

            int number = random.nextInt(baseStr.length());

            temp.append(baseStr.charAt(number));

        }

        return temp.toString();

    }




前端 - 发送请求并解析地理位置信息




<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>绑定页</title>

</head>

<body>

<a href="javascript:;" onclick="getLocation()">获取我的位置信息</a>

<script src="${ctx}/assets/jquery-1.10.2.min.js"></script>

<script src="${ctx}/assets/jweixin-1.2.0.js"></script>

<script type="text/javascript">

    $(function(){

        configWx();

    });

    function configWx() {

        var thisPageUrl = location.href.split('#')[0];

        $.get(

                "${ctx}/oauth/get_jsapi_ticket",

                {url:thisPageUrl},

                function(data){

                    console.log(data);

                    if(data!=null){

                        configWeiXin(data.appId, data.timestamp, data.nonceStr,

                                data.signature);

                    }else {

                        console.log("配置weixin jsapi失败");

                    }

                }

        );

    }

    function configWeiXin(appId, timestamp, nonceStr, signature) {

        wx.config({

            debug : true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

            appId : appId,

            timestamp : timestamp,

            nonceStr : nonceStr,

            signature : signature,

            jsApiList : [ 'chooseImage', 'uploadImage', 'downloadImage',

                'previewImage', 'openLocation', 'getLocation',

                'scanQRCode', 'checkJsApi', 'onMenuShareTimeline',

                'onMenuShareAppMessage', 'onMenuShareQQ',

                'onMenuShareWeibo', 'onMenuShareQZone' ]

        });

        console.log("wx");

        console.log(wx);

    }

    function getLocation() {

        wx.getLocation({

            type : 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'

            success : function(res) {

                //使用微信内置地图查看位置接口

                wx.openLocation({

                    latitude : res.latitude, // 纬度，浮点数，范围为90 ~ -90

                    longitude : res.longitude, // 经度，浮点数，范围为180 ~ -180。

                    name : '我的位置', // 位置名

                    address : '中国海洋大学', // 地址详情说明

                    scale : 28, // 地图缩放级别,整形值,范围从1~28。默认为最大

                    infoUrl : 'http://www.haiyangdaxue.com' // 在查看位置界面底部显示的超链接,可点击跳转（测试好像不可用）

                });

            },

            cancel : function(res) {

            }

        });

    }

</script>

</body>

</html>


												


											
[微信开发] 微信JSAPI - 获取用户地理位置信息的更多相关文章
	

    
								
  1. 【微信小程序】获取用户地理位置权限，二次请求授权，逆解析获取地址
		
    摘要:微信小程序内获取用户地理位置信息授权,被拒绝后二次获取,获取权限后逆解析得到用户所在省市区等.. 场景:商城类小程序,在首页时需展示附近门店,即用户刚进入小程序时就需要获取到用户位置信息 ste ...
    
		
    2. 
						
  2. JSSDK获取用户地理位置信息
		
    复制一份JSSDK环境,创建一份index.html文件,结构如图7.1所示. 图7.1  7.1节文件结构 在location.js中,封装“getLocation”接口,如下: 01  wxJSS ...
    
		
    3. 
						
  3. 微信开发笔记：获取用户openid，以及用户头像昵称等信息
		
    微信开发的时候有一个很便利的途径来进行一个用户的一步注册登录,就是使用用户的微信信息来直接进行登陆,可以省去很多不必要的麻烦.那具体这些信息是如何来获取的呢? 首先呢,我们需要对微信进行一个授权,让微 ...
    
		
    4. 
						
  4. 微信小程序授权获取用户详细信息openid
		
    小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像,昵称 wx.getUserInfo({ success: function (res) { that. ...
    
		
    5. 
						
  5. 微信小程序open-data获取用户的信息样式设置
		
    效果图 wxml代码 <view class="userinfo"> <!-- 用户头像 --> <view class="userinfo ...
    
		
    6. 
						
  6. [扩展推荐] Laravel 中利用 GeoIP 获取用户地理位置信息
		
    我最近需要一个用户地域检测来设置用户的默认区域和货币.由 Daniel Stainback 创建的 torann/geoip  很好地满足为Laravel 5 项目提供 GeoIP 服务的要求. 这个 ...
    
		
    7. 
						
  7. 根据ip获取用户地理位置
		
    各大网站都提供根据ip获取用户地理位置信息,这里以新浪的接口为例子 接口地址为:http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js ...
    
		
    8. 
						
  8. [微信小程序] 微信小程序获取用户定位信息并加载对应城市信息，wx.getLocation，腾讯地图小程序api，微信小程序经纬度逆解析地理信息
		
    因为需要在小程序加个定位并加载对应城市信息 然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利 ...
    
		
    9. 
						
  9. php 微信登录 公众号 获取用户信息 微信网页授权
		
    php 微信登录 公众号 获取用户信息 微信网页授权 先自己建立两个文件: index.php  和  getUserInfo.php index.php <?php //scope=snsap ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Open Source Book For ML
			
    The following is a list of free, open source books on machine learning, statistics, data-mining, etc ...
    
			
    2. 
						
  2. BZOJ.2034.[2009国家集训队]最大收益(二分图匹配 贪心)
			
    题目链接 双倍经验:BZOJ.4276.[ONTAK2015]Bajtman i Okrągły Robin(然而是个权限题.区间略有不同) \(Description\) 有\(n\)个任务,完成一 ...
    
			
    3. 
						
  3. 10.30 正睿停课训练 Day12
			
    目录 2018.10.30 正睿停课训练 Day12 A 强军战歌(DP 树状数组 容斥) B 当那一天来临(思路) C 假如战争今天爆发(贪心) 考试代码 B C 2018.10.30 正睿停课训练 ...
    
			
    4. 
						
  4. c潭州课堂25班：Ph201805201 MySQL第二课 (课堂笔记)
			
    mysql> create table tb_2( -> id int, -> name varchar(10) not null -> ); 插入数据 insert into ...
    
			
    5. 
						
  5. 【11.8校内测试】【倒计时2天】【状压DP】【随机化？/暴力小模拟】
			
    Solution 数据范围疯狂暗示状压,可是一开始发现状态特别难受. 将每一层的奇偶性状压,预处理所有状态的奇偶性.每一层的输入代表的其实可以是下一层某个点可以被从这一层哪些点转移到. 所以枚举每个状 ...
    
			
    6. 
						
  6. 中文分词组件：thulac及jieba试用手记
			
    一.THULAC THULAC由<清华大学自然语言处理与社会人文计算实验室>研制推出的一套中文词法分析工具包.官网地址:http://thulac.thunlp.org,该项目提供了多种语 ...
    
			
    7. 
						
  7. ArcGIS教程：曲率
			
    摘要 计算栅格表面的曲率,包括剖面曲率和平面曲率. 用法 · 主要输出结果为每个像元的表面曲率,该值通过将该像元与八个相邻像元拟合而得.曲率是表面的二阶导数,或者可称之为坡度的坡度.可供选择的输出曲率 ...
    
			
    8. 
						
  8. scrollView 刷新显示在中间的问题
			
    scrollView问题 打开activity之后 屏幕初始位置不是顶部 而是在中间 也就是scroll滚动条不在上面 而是在中间 楼主你好,我大概是和你遇见了同样的问题,你可以灵活处理一下,不要去管 ...
    
			
    9. 
						
  9. caffe solver 配置详解
			
    caffe solver通过协调网络前向推理和反向梯度传播来进行模型优化,并通过权重参数更新来改善网络损失求解最优算法,而solver学习的任务被划分为:监督优化和参数更新,生成损失并计算梯度.caf ...
    
			
    10. 
						
  10. Art: Neural Style Transfer
			
    Andrew Ng deeplearning courese-4:Convolutional Neural Network Convolutional Neural Networks: Step by ...
    
			
    11.