위 챗 개발:JS-SDK 위 챗 내장 맵 을 연결 하여 현재 위치 가 져 오기

5907 단어 Java-위 챗 편
1.먼저 자신의 위 챗 공식 플랫폼 이 js-sdk 맵 의 개발 자 권한 을 가 져 왔 는 지 확인 합 니 다.
2.jar 패키지 참조:

3.첫 페이지 에 들 어 갈 때 우리 의 위치 정 보 를 얻 기 시작 합 니 다.
   PS:이것 은 첫 페이지 에 쓰 여 있 습 니 다.아래 에 있 는 것 이 야 말로 인 터 페 이 스 를 바 꾸 려 는 페이지 에 쓰 여 있 습 니 다.

	$(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;
								}
							}
						});
					}
				});
			}
		});

	});

 (3.1) vip_wxsdk_config 방법:
@ResponseBody
@RequestMapping("vip_wxsdk_config")
public Map 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+"
jsapi_ticket:"+jsapi_ticket+"
:"+timestamp+"
:"+noncestr); // 5、 String str = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + noncestr + "&timestamp=" + timestamp + "&url=" + url; // 6、 sha1 String signature = SHAUtils.SHA1(str); map = new HashMap(); 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 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:

 $(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/'//                ,       
	  });
      }
    });
 });

좋은 웹페이지 즐겨찾기