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

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

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

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

最后发现，原来微信公众号提供了现成的获取用户地理位置的JS-SDK：https://mp.weixin.qq.com/wiki...

一：绑定域名

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

二：引入JS文件

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/...

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js... （支持https）。

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

wx.config(<?php
        echo Yii::$app->wechat->js->config([
            'getLocation',
            'openLocation'
        ])
        ?>
    );

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

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

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

查看文档会找到如上代码，这时候你将代码直接赋复制执行的话，这时候获取地理位置的接口时不会触发的，我们必须要将回去地理位置的接口放到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; // 位置精度
            }
        });
    });

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

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

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
    wx.config(<?php
        echo Yii::$app->wechat->js->config([
            'getLocation',
            'openLocation'
        ])
        ?>
    );
    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; // 位置精度
            }
        });
    });
    wx.error(function(res){
        console.log(res);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    });
</script