参考博客

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. Python3Numpy——相关性协方差应用
			
    基本理论 Correlation Are there correlations between variables? Correlation measures the strength of the  ...
    
			
    2. 
						
  2. 潭州课堂25班：Ph201805201 第五课：格式化输出和深浅复制 (课堂笔记)
			
    格式化输出和字符串转义 占位符 使用示意 作用 %s '%s %s' % ('hello', 'world') 表示占位的是str %d '%d %d' % (1, 2) 表示占位的是int %d ' ...
    
			
    3. 
						
  3. 学校的统一订书80%该烧掉——IT推荐书单
			
    学校的统一订书80%该烧掉——IT推荐书单 作者: 夏浅音.py 中文图书个人黑名单:清华大学出版社的国产作者,例如一段错n次的谭浩强.一页错n次的严蔚敏... 中文图书个人白名单:机械工业出版社.电 ...
    
			
    4. 
						
  4. 构造函数与getter和setter的区别
			
    构造函数是用于初始化类的属性,且只有在创建对象时才会调用构造函数,用于给对象分配地址 无参的构造函数,创建对象时默认调用,当程序没有明确写出有参的构造函数,系统会默认的创建一个. 有参的构造函数,创建 ...
    
			
    5. 
						
  5. 使用 ssmtp 於 shell 透過 Gmail 寄信
			
    有很多程式於 bash shell 執行, 執行完要自動寄信出去, 但是最近都被 Google 退信, 最好的方法是透過 Gmail 直接寄信. 本來是要另外寫隻 script 來做這種事, 剛剛發現 ...
    
			
    6. 
						
  6. 如何使用Bootstrap自带图标
			
    查看可用的字体图标列表: http://www.runoob.com/try/demo_source/bootstrap3-glyph-icons.htm 第一步:下载Bootstrap,发现目录中包 ...
    
			
    7. 
						
  7. iOS开发-观察者模式
			
    观察者模式也被称作发布/订阅模式,观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己.观察者模式中 ...
    
			
    8. 
						
  8. Visual Studio 2015 与 .NET 4.6 RTM 正式发布
			
    原文地址 微软终于正式发布了Visual Studio 2015产品家族的RTM版本,此次发布体现了微软在开发工具发展方向上的转变迈出了重要的一步,他们致力于提供一种支持在所有主流应用平台上进行应用开 ...
    
			
    9. 
						
  9. MySql之存储过程的使用
			
    一:创建存储过程 1:简单存储过程 CREATE PROCEDURE 存储过程名() BEGIN SQL操作 END; 2:使用参数的存储过程 CREATE PROCEDURE 存储过程名(IN in ...
    
			
    10. 
						
  10. ORA-19602: cannot backup or copy active file in NOARCHIVELOG mode
			
    备份数据库,报错如下 RMAN> backup database; Starting backup at -JAN- allocated channel: ORA_DISK_1 channel  ...
    
			
    11.