微信公众号：对接JS-SDK微信内置地图获取当前位置

1.首先第一步查看一下自己的微信公众平台有没有获取js-sdk地图的开发者权限

2.引用jar包：

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

3.进入首页的时候，开始获取我们的位置信息：

PS：注意这个是写在首页的，下面那个才是写在你要调启接口的页面

<script type="text/javascript">
	$(function() {
		var zt = 0;
		var url = location.href.split('#').toString();//url不能写死
		$.ajax({
			type : "post",
			url : "vip_wxsdk_config",
			dataType : "json",
			async : false,
			data : {
				url : url
			},
			success : function(data) {
				wx.config({
					debug : false,////生产环境需要关闭debug模式
					appId : data.appid,//appId通过微信服务号后台查看
					timestamp : data.timestamp,//生成签名的时间戳
					nonceStr : data.noncestr,//生成签名的随机字符串
					signature : data.signature,//签名
					jsApiList : [//需要调用的JS接口列表
					'chooseImage', 'uploadImage', 'downloadImage',
							'previewImage', 'openLocation', 'getLocation',
							'scanQRCode', 'checkJsApi', 'onMenuShareTimeline',
							'onMenuShareAppMessage', 'onMenuShareQQ',
							'onMenuShareWeibo', 'onMenuShareQZone' 
						]
				});
			},
			error : function(xhr, status, error) {
				//alert(status);
				//alert(xhr.responseText);
			}
		});
		wx.ready(function() {
			if (zt == '0') {
				wx.getLocation({
					type : 'wgs84', // 默认为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; // 位置精度
						$.ajax({
							type : "post",
							url : "vip_wxsdk_dingwei",//获取经度，纬度
							data : {
								"latitude" : latitude,
								"longitude" : longitude
							},
							dataType : "json",
							success : function(data) {
								if (data = "success") {
									zt = 1;
								}
							}
						});
					}
				});
			}
		});

	});
</script>

(3.1) vip_wxsdk_config方法：

@ResponseBody
@RequestMapping("vip_wxsdk_config")
public Map<String, Object> vip_wxsdk_config(Model model, Wx wx, HttpSession session, String url) {
	wx = wxService.selectByPrimaryKey(1);
	// 1、获取AccessToken
	String jsapi_ticket = "";
	String accessToken = "";
	if (session.getAttribute(Constants.jsapi_ticket) != null) {
		jsapi_ticket = session.getAttribute(Constants.jsapi_ticket).toString();
	} else {
		accessToken = CommonUtil.getToken(wx.getWxAppid(), wx.getWxAppsecret()).getAccessToken();
		// 2、获取Ticket
		jsapi_ticket = CommonUtil.getTicket(accessToken);
		session.setAttribute(Constants.jsapi_ticket, jsapi_ticket);
	}
	// 3、时间戳和随机字符串
	String noncestr = AdvancedUtil.getNonceStr();
	String timestamp = Sha1Util.getTimeStamp();
	// System.out.println("accessToken:"+accessToken+"\njsapi_ticket:"+jsapi_ticket+"\n时间戳："+timestamp+"\n随机字符串："+noncestr);
	// 5、将参数排序并拼接字符串
	String str = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + url;
	// 6、将字符串进行sha1加密
	String signature = SHAUtils.SHA1(str);
	map = new HashMap<String, Object>();
	map.put("appid", wx.getWxAppid());
	map.put("accessToken", accessToken);
	map.put("jsapi_ticket", jsapi_ticket);
	map.put("timestamp", timestamp);
	map.put("noncestr", noncestr);
	map.put("signature", signature);
	return map;
}

(3.2) vip_wxsdk_dingwei方法：

@ResponseBody
@RequestMapping("vip_wxsdk_dingwei")
public Map<String, Object> vip_wxsdk_dingwei(Model model, Wx wx, String latitude, String longitude, HttpSession session) {
	if (latitude != null && longitude != null) {
		session.setAttribute("latitude", latitude);
		session.setAttribute("longitude", longitude);
		this.prompt = "success";
	} else {
		this.prompt = "error";
	}
	return map;
}

4.在我们要跳转的页面加上调启的js：

<script type="text/javascript">
 $(function(){
 	var zt=0;
    var url = location.href.split('#').toString();//url不能写死
    $.ajax({
        type : "post",
        url : "vip_wxsdk_config",
        dataType : "json",
        async : false,
        data:{url:url},
        success : function(data) {
            wx.config({
                debug: false,////生产环境需要关闭debug模式
                appId: data.appid,//appId通过微信服务号后台查看
                timestamp: data.timestamp,//生成签名的时间戳
                nonceStr: data.noncestr,//生成签名的随机字符串
                signature: data.signature,//签名
                jsApiList: [//需要调用的JS接口列表
                     'chooseImage', 'uploadImage', 'downloadImage',  
                    'previewImage', 'openLocation', 'getLocation',  
                    'scanQRCode', 'checkJsApi', 'onMenuShareTimeline',  
                    'onMenuShareAppMessage', 'onMenuShareQQ',  
                    'onMenuShareWeibo', 'onMenuShareQZone'
                ]
            });
        },
        error: function(xhr, status, error) {
            //alert(status);    //调试的时候可以打开
            //alert(xhr.responseText); //如果弹出 errMsg”:"config:ok 就表示可以调起接口了
        }
    });
    wx.ready(function(){  //点击按钮时获取到位置信息
    document.querySelector('#go').onclick = function () {
       wx.openLocation({  
	   latitude:<%=request.getAttribute("weidu")%>, // 纬度，浮点数，范围为90 ~ -90  
	   longitude:<%=request.getAttribute("jingdu")%>, // 经度，浮点数，范围为180 ~ -180。  
	   name:'<%=request.getAttribute("name")%>',  
	   address:'<%=request.getAttribute("address")%>',
	   scale : 12, // 地图缩放级别,整形值,范围从1~28。默认为最大  
	   infoUrl : 'http://jnxm.tianmall.biz/'// 在查看位置界面底部显示的超链接,可点击跳转  
	  });
      }
    });
 });
</script>

微信公众号：对接JS-SDK微信内置地图获取当前位置

猜你喜欢