您现在的位置是:网站首页>>微信>>微信公众号

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

发布时间:2019-05-14 16:36:56作者:wangjian浏览量:1047点赞量:0

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

    但是在这之前我只知道在关注微信公众号的时候获取用户地理位置: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接口安全域名(这里我使用的是测试号)

    image.png

    二:引入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(<?php
            echo Yii::$app->wechat->js->config([
                'getLocation',
                'openLocation'
            ])
            ?>
        );

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

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

    image.png

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

    image.png

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

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

    image.png

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

    <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

0 +1