微信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