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 + "×tamp=" + 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>