上次因为工作中用到微信公众号开发之微信分享的标题图标等相关SDK,看了下微信的SDK官方文档发现里面还是有很多很不错的技术比如地理定位,上传图片等等,然后昨天周末来公司被强制加班就顺便搞了微信的地理位置相关的SDK,先看效果:
代码实现如下:
1.微信SDK压缩包,在上一篇博客中有上传,我还是用这个包没动;
2.引入这个SDK,我也没动;
3.前端Jquery代码如下:
=====================Jquery代码======================
wx.config({
debug: false, //调式模式,设置为ture后会直接在网页上弹出调试信息,用于排查问题
appId: '{$signPackage["appId"]}',
timestamp: '{$signPackage["timestamp"]}',
nonceStr: '{$signPackage["nonceStr"]}',
signature: '{$signPackage["signature"]}',
jsApiList: [ //需要使用的网页服务接口
//'onMenuShareQQ', //分享到QQ
'getLocation' //获取地理位置接口
]
});
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
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; // 位置精度
$("#weidu").val(latitude);
$("#jingdu").val(longitude);
$("#speed").val(speed);
$("#accuracy").val(accuracy);
}
});
});
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
alert(res.errMsg);
});
=====================Jquery代码 end======================
Jquery代码流程是:
3.1 引入Wx.config,即将调取的定位接口名;
3.2 编写wx.ready(function(){...})
3.3 编写定位接口:wx.getLocation({...})
3.4 错误输出...
蛮好玩的,也不是太难,对吧!!