微信公众号里面使用定位

  • Post author:
  • Post category:其他



1.第一步当然是已经正确接入了微信并且配置好了回调安全域名。不会的朋友可以看看



《微信开发-初级接入微信公众平台MP》



2.

引用微信


js-sdk,




http://res.wx.qq.com/open/js/jweixin-1.0.0.js



,然后通过config接口注入权限验证配置。先在自己的服务器上写个获取数据的接口:



  1. /**


  2. * 获取页面需要的配置信息的参数

  3. *

  4. * @param request

  5. * @param url

  6. * @return

  7. */

  8. @ResponseBody

  9. @RequestMapping(

    value


    =


    “getJsTicket”


    )


  10. public Map

    <


    String


    , Object


    >


    getWeJsTicket(HttpServletRequest request, String url) {


  11. Map

    <


    String


    , Object


    >




    map


    =


    new


    HashMap


    <


    String


    , Object


    >


    ();


  12. try {

  13. // 获取微信signature

  14. WxJsapiSignature

    sin


    =


    wxMpService


    .createJsapiSignature(url);


  15. map.put(“appId”, configStorage.getAppId());

  16. map.put(“timestamp”, sin.getTimestamp());

  17. map.put(“nonceStr”, sin.getNonceStr());

  18. map.put(“signature”, sin.getSignature());

  19. } catch (Exception e) {

  20. this.logger.error(e.getMessage());

  21. }

  22. return map;

  23. }


3.在引用了jweixin-1.0.0.js的页面里配置wx.config的验证(反正我把相关代码独立到单独的js文件里不行,不知为何),用ajax方式请求上面提供的url获得相关验证消息,然后再调用we.config方法去向微信服务器做验证:



  1. function configWx() {


  2. var

    thisPageUrl


    =


    location


    .href.split(‘#’)[0];


  3. var

    json


    = {


  4. url : thisPageUrl

  5. };

  6. var

    ajaxHelper


    =


    new


    AjaxHelper()


  7. ajaxHelper.get(“../weixin/getJsTicket”, json, function(data) {

  8. if (data != null) {

  9. configWeiXin(data.appId, data.timestamp, data.nonceStr,

  10. data.signature);

  11. } else {

  12. console.log(“配置weixin jsapi失败”);

  13. }

  14. }, function() {

  15. console.log(“配置请求错误”);

  16. });

  17. }


  18. function configWeiXin(appId, timestamp, nonceStr, signature) {

  19. wx.config({

  20. debug : true,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

  21. appId : appId,

  22. timestamp : timestamp,

  23. nonceStr : nonceStr,

  24. signature : signature,

  25. jsApiList : [ ‘chooseImage’, ‘uploadImage’, ‘downloadImage’,

  26. ‘previewImage’, ‘openLocation’, ‘getLocation’,

  27. ‘scanQRCode’, ‘checkJsApi’, ‘onMenuShareTimeline’,

  28. ‘onMenuShareAppMessage’, ‘onMenuShareQQ’,

  29. ‘onMenuShareWeibo’, ‘onMenuShareQZone’ ]

  30. });

  31. }



注意


jsApiList


里配的权限。其它权限可从

https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E4.BD.BF.E7.94.A8.E5.BE.AE.E4.BF.A1.E5.86.85.E7.BD.AE.E5.9C.B0.E5.9B.BE.E6.9F.A5.E7.9C.8B.E4.BD.8D.E7.BD.AE.E6.8E.A5.E5.8F.A3  config接口注入权限验证配置完成。


3.  测试号也可以使用地理位置功能,且微信是能使用alert(“”)弹出框的。


WGS84:为一种大地坐标系,也是目前广泛使用的GPS全球卫星定位系统使用的坐标系。


GCJ02:又称火星坐标系,是由中国国家测绘局制订的地理信息系统的坐标系统。由WGS84坐标系经加密后的坐标系


BD09:为百度坐标系,在GCJ02坐标系基础上再次加密。其中bd09ll表示百度经纬度坐标,bd09mc表示百度墨卡托米制坐标。


2个js方法:


使用微信内置地图查看位置接口



  1. wx.openLocation({


  2. latitude: 0, // 纬度,浮点数,范围为90 ~ -90

  3. longitude: 0, // 经度,浮点数,范围为180 ~ -180。

  4. name: ”, // 位置名

  5. address: ”, // 地址详情说明

  6. scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大

  7. infoUrl: ” // 在查看位置界面底部显示的超链接,可点击跳转

  8. });


获取地理位置接口:



  1. wx.getLocation({


  2. type: ‘wgs84′, // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入’gcj02’

  3. success: function (res) {

  4. var

    latitude


    =


    res


    .latitude; // 纬度,浮点数,范围为90 ~ -90


  5. var

    longitude


    =


    res


    .longitude; // 经度,浮点数,范围为180 ~ -180。


  6. var

    speed


    =


    res


    .speed; // 速度,以米/每秒计


  7. var

    accuracy


    =


    res


    .accuracy; // 位置精度


  8. }

  9. });


一般我们如下使用:



  1. function getLocation() {


  2. wx.getLocation({

  3. type : ‘gcj02′, // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入’gcj02’

  4. success : function(res) {

  5. //使用微信内置地图查看位置接口

  6. wx.openLocation({

  7. latitude : res.latitude, // 纬度,浮点数,范围为90 ~ -90

  8. longitude : res.longitude, // 经度,浮点数,范围为180 ~ -180。

  9. name : ‘我的位置’, // 位置名

  10. address : ‘329创业者社区’, // 地址详情说明

  11. scale : 28, // 地图缩放级别,整形值,范围从1~28。默认为最大

  12. infoUrl : ‘http://www.gongjuji.net’ // 在查看位置界面底部显示的超链接,可点击跳转(测试好像不可用)

  13. });

  14. },

  15. cancel : function(res) {


  16. }

  17. });

  18. }


先通过getLocation方式获取 到当前的经纬度,然后再将经纬度传给openLocation.


注意:jsApiList里若没配置openLocation和getLocation权限会报




错误。


getLocation方法用于获得当前的经纬度,openLocation用于打开微信内置地图显示详情。比如现在的地图如下: