微信公众号开发之获取地理位置SDK接入

上次因为工作中用到微信公众号开发之微信分享的标题图标等相关SDK,看了下微信的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 错误输出...

蛮好玩的,也不是太难,对吧!!

相关推荐