<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>获取地理位置</title>
<!-- 微信 js-sdk -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<link rel="stylesheet" href="http://cdn.bootCSS.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<br>
<div class="container">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">地址:</label>
<div class="col-sm-10" id="item-ifo">
<input type="text" value="" class="form-control"
name="location.address" id="address" placeholder="正在获取地理位置" tabindex="1" autocomplete="off" />
<div class="i-name ico" id="i-name"></div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '${jsWechatConfig.appId}', // 必填,公众号的唯一标识
timestamp: '${jsWechatConfig.timestamp}' , // 必填,生成签名的时间戳
nonceStr: '${jsWechatConfig.noncestr}', // 必填,生成签名的随机串
signature: '${jsWechatConfig.signature}',// 必填,签名,见附录1
jsApiList: [ 'checkJsApi', 'openLocation', 'getLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.checkJsApi({
jsApiList: ['getLocation'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
success: function(res) {
if (res.checkResult.getLocation == false) {
alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
return;
}
}
});
var latitude;
var longitude;
var speed;
var accuracy;
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.getLocation({
success : function(res) {
latitude = res.latitude; // 纬度,浮点数,范围为90 ~ -90
longitude = res.longitude; // 经度,浮点数,范围为180 ~ -180。
speed = res.speed; // 速度,以米/每秒计
accuracy = res.accuracy; // 位置精度
alert(latitude);
alert(accuracy);
},
cancel : function(res) {
alert('未能获取地理位置');
}
});
});
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
alert("验证出错");
});
</script>
</html>
来源: http://www.cnblogs.com/phil_jing/p/7413599.html