微信公众号开发之获取地理位置SDK接入
上次因为工作中用到微信公众号开发之微信分享的标题图标等相关SDK,看了下微信的SDK官方文档发现里面还是有很多很不错的技术比如地理定位,上传图片等等,然后昨天周末来公司被强制加班就顺便搞了微信的地理位置相关的SDK,先看效果:
跟百度比较还是蛮准确的,看来微信的技术还是值得信赖的。
代码实现如下:
1.微信SDK压缩包,在上一篇博客中有上传,我还是用这个包没动;
2.引入这个SDK,我也没动;
3.前端Jquery代码如下:
=====================Jquery代码======================
<body>
<div style='margin:0 auto;display:none;'>
<img src="/Public/h5/weekly/images/xiao3.png">
</div>
<!-- </div> -->
<div class="default-detail-container">
<div class="share-div">
<div class="share-title">
<span>获取地理位置接口(gps)</span>
</div>
</div>
<div class="return-article-top">回顶部</div>
纬度:<input type="text" name="weidu" id="weidu"><br/>
经都:<input type="text" name="jingdu" id="jingdu"><br/>
速度:<input type="text" name="speed" id="speed"><br/>
位置精度:<input type="text" name="accuracy" id="accuracy"><br/>
<!-- vision3 -->
<a href="http://www.xiaoheiban.cn/invitenumber-intro" class="help">
</a>
<!-- vision3 -->
</div>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript">
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);
});
</script>
</body>
=====================Jquery代码 end======================
Jquery代码流程是:
3.1 引入Wx.config,即将调取的定位接口名;
3.2 编写wx.ready(function(){...})
3.3 编写定位接口:wx.getLocation({...})
3.4 错误输出...
蛮好玩的,也不是太难,对吧!!