今天整理一下微信开发展示当前位置的相关内容。
开发环境参考:微信开发(一)--分享接口 点击打开链接
一.页面配置:
开发环境参考:微信开发(一)--分享接口 点击打开链接
一.页面配置:
设置jsp页面显示
<div class="weui_cells">
<div class="weui_cell">
<div class="weui_cell_select">
<label class="weui-form-preview__label"><span style="color:red;"></span>当前位置: </label>
</div>
<div class="weui_cell_bd weui_cell_primary">
<textarea id="signArea" name="signArea" readonly="readonly" class="weui_textarea" rows="3">位置获取中...</textarea>
</div>
</div>
</div>
二
.js获取凭证 调用位置接口:
备注:获取jssdk配置可以参考前两篇文章。
/* 初始化jssdk */
$.get("${basePath}/jssdk/config.do",{url:window.location.href},function(data,status){
if(status == "success"){
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名,见附录1
jsApiList: ['getLocation'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 获取地理位置接口
});
wx.ready(function(){
//layer.msg("jssdk初始化成功");
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,
//所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,
//也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
layer.msg(res);
});
}
},"json");
wx.ready(function(){
wx.getLocation({
type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gcj02'
success: function (res) {
//$("#latitude").val(res.latitude);// 纬度,浮点数,范围为90 ~ -90
//$("#longitude").val(res.longitude);// 经度,浮点数,范围为180 ~ -180。
$.ajax({
type: 'POST',
url: "${basePath}/position/getDetail.do?method=area&latitude="+res.latitude+"&longitude="+res.longitude,
dataType: 'text',
success: function(data){
if($("#signArea").val() == "位置获取中..." || $("#signArea").val() == ""){
alert('data'+data);
$("#signArea").val(data);
}
}
});
}
});
});
wx.error(function (res) {
alert("调用微信jsapi返回的状态:"+res.errMsg);
});
三
.后台解析数据:
根据需求,本文用了百度的接口解析地理位置,也可以使用其他工具进行地址解析。
/**
* 获取位置
* @param latitude
* @param longitude
* @return
*/
private String getGeographicalPosition(String latitude , String longitude) {
// 参数解释: 纬度,经度 type 001 (100代表道路,010代表POI,001代表门址,111可以同时显示前三项) 用百度的一接口 解析地理位置
String urlString = "http://gc.ditu.aliyun.com/regeocoding?l="+latitude+","+longitude+"&type=010";
String res = "";
try {
URL url = new URL(urlString);
HttpURLConnection conn = (HttpURLConnection) url.openConnection();
conn.setDoOutput(true);
conn.setRequestMethod("POST");
BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(),"UTF-8"));
String line;
while ((line = in.readLine()) != null) {
res += line + "\n";
}
in.close();
} catch (Exception e) {
System.out.println("error: " + e.getMessage());
}
return res;
}
@ResponseBody
@RequestMapping(value="/checkCustomerName", method = RequestMethod.POST,produces = "text/html;charset=UTF-8")
private String checkCustomerName(@RequestParam(value="addCustomerName")String addCustomerName ) throws IOException{
// 根据新录入的客户名称 判断是否已经存在
CustomerInfoExample example = new CustomerInfoExample();
CustomerInfoExample.Criteria criteria = example.createCriteria();
criteria.andNameEqualTo(addCustomerName);
List<CustomerInfo> customerInfoList = customerInfoService.loadCustomerInfoByExample(example);
String customerInfoId= "0";
if (customerInfoList.size()>0) {
customerInfoId=customerInfoList.get(0).getId()+"" ;
}
JSONArray jsonArray = new JSONArray();//new一个json数组
jsonArray.add(customerInfoId);
return jsonArray.toString();
}
学习在于不断地探索、思考和总结记录,欢迎喜欢的朋友们在下方留言,期待与君共同进步!