微信JSSDK获取用户地理位置(经纬度)

最近一直在做公众号开发,这两天公司让我做一个类似钉钉打卡的功能,这时候我需要获取到用户的经纬度,

但是在这之前我只知道在关注微信公众号的时候获取用户地理位置:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140841

但是这时候在我这里无法使用,我需要在微信公众号的网页中获取用户的地理位置(经纬度)

最后发现,原来微信公众号提供了现成的获取用户地理位置的JS-SDK:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

一:绑定域名

登录微信公众号绑定JS接口安全域名(这里我使用的是测试号)

微信JSSDK获取用户地理位置(经纬度)_第1张图片

二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)。

三:通过config接口注入权限验证配置

wx.config(wechat->js->config([
            'getLocation',
            'openLocation'
        ])
        ?>
    );

'getLocation','openLocation'表示的是需要使用的JS接口列表,所有JS接口列表参考上面JS-JDK文档中的附录二

这里我是在Yii框架中使用的是easywechat,原生写法可以参考上面的JS-SDK文档

微信JSSDK获取用户地理位置(经纬度)_第2张图片

三:获取用户的地理位置(经纬度)

微信JSSDK获取用户地理位置(经纬度)_第3张图片

查看文档会找到如上代码,这时候你将代码直接赋复制执行的话,这时候获取地理位置的接口时不会触发的,我们必须要将回去地理位置的接口放到wx.ready方法内部,如:

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; // 位置精度
            }
        });
    });

这时候我们就可以获取到用户的地理位置信息了

微信JSSDK获取用户地理位置(经纬度)_第4张图片

完整的获取用户的地理位置(经纬度)代码



                    
                    

你可能感兴趣的:(微信)