微信js获取地理位置

微信js获取地理位置

1.绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

2.引入js文件
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=DD279b2a90afdf0ae7a3796787a0742e"></script>//地图文件
3.获取微信需要字段
 
    

var appId, //公众号名称,由商户传入
    timeStamp, //时间戳,自1970年以来的秒数
    nonceStr, //随机串
    signature; //微信签名方式

$.ajax({
                type : 'post',
                url : '../',
                dataType:'json', 
                success : function(data){ 
                        
                     //alert(JSON.stringify(data));
                        appId= data.appId; // 必填,公众号的唯一标识
                        timeStamp= data.timeStamp; // 必填,生成签名的时间戳
                        nonceStr= data.nonceStr; // 必填,生成签名的随机串
                        signature= data.signature;
                        
                        getLocation();//获取地理位置                            
                    
                },
                beforeSend:function(){
                    
                },
                error:function(){
                    
                    alert('error');
                }
            });
4.调微信获取地理位置接口(返回经、纬度值)
function getLocation(){
            
            /* 微信分享朋友圈 */
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: appId, // 必填,公众号的唯一标识
                timestamp: timeStamp, // 必填,生成签名的时间戳
                nonceStr: nonceStr, // 必填,生成签名的随机串
                signature: signature,// 必填,签名,见附录1
                jsApiList: ["getLocation"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });
            
            wx.ready(function(){
                //获取地理位置
                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; // 位置精度
                        //alert('纬度'+latitude+" ;经度"+longitude);
                        //生成地理位置
                        var fname = '';
                        var point = new BMap.Point(longitude, latitude);
                        var geoc = new BMap.Geocoder();
                        geoc.getLocation(point, function(rs) {
                            var addComp = rs.addressComponents;
                            
                            //alert(addComp.province + ", "+addComp.city + ", "+addComp.district + ", "+addComp.street + ", "+addComp.streetNumber);
                            fname = addComp.district;
                            //alert('您现在所处位置:'+fname);
                            //抽奖--判断地理位置 & 抽奖机会
                                
                            if(fname=='XX区'){
                                //执行
                            }else{
                                alert('本次活动目前向针对活动地区开放,其他地区敬请期待!');return;
                            }
                        });
                    },
                    fail:function(res){
                        alert("获取位置失败,检查是否开启定位服务");
                    }
                });
            });
            
            wx.error(function(res){
                console.log(res.errMsg);
            });
            
            wx.checkJsApi({
                jsApiList: ["getLocation"], // 需要检测的JS接口列表,所有JS接口列表见附录2,
                success: function(res) {
                    //alert('check success!')
                    // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                }
            });
        }

 

5.根据径、纬度获取地理位置方法
/*
         * 根据经纬度获取位置
         * param1:经度
         * param2:纬度
         */
        //获取地理位置
       //var map = new BMap.Map("allmap");
            var point = new BMap.Point(lng, lat);
            //map.centerAndZoom(point, 12);
            var geoc = new BMap.Geocoder();
            geoc.getLocation(point, function(rs) {
                var addComp = rs.addressComponents;
                
                //alert(addComp.province + ", "+addComp.city + ", "+addComp.district + ", "+addComp.street + ", "+addComp.streetNumber);
                return addComp.district;
            });
        

 

6.常见问题

我在使用时把经纬度转换地理位置写成一个getAddress()方法,在wx.getLocation的成功回调是调用getAddress,发现我几处弹框弹出的顺序不对,没有成功拿到getAddress的返回值。

所以使用时需要注意百度地图的这个API是异步执行。

posted @ 2017-07-16 11:15 _只鱼 阅读( ...) 评论( ...) 编辑 收藏
### 使用微信JSAPI获取用户地理位置 为了通过微信JSAPI获取用户的地理位置,需遵循一系列步骤来配置并调用相应的接口。具体实现涉及几个重要环节。 #### 配置JS-SDK权限验证签名 在前端页面加载时,服务器端应先请求获得`access_token`[^1],随后利用此令牌换取`jsapi_ticket`[^2]。这两个参数对于生成有效的签名字符串至关重要,它们用于确保后续JavaScript API调用的安全性和合法性。 ```javascript wx.config({ debug: false, appId: '<?php echo $signPackage["appId"];?>', timestamp: <?php echo $signPackage["timestamp"]?>, nonceStr: '<?php echo $signPackage["nonceStr"]?>', signature: '<?php echo $signPackage["signature"]?>', jsApiList: ['getLocation'] }); ``` 上述代码片段展示了如何初始化微信JS-SDK环境,其中包含了必要的配置项如应用ID(`appId`)、时间戳(`timestamp`)以及随机串(`nonceStr`)等,并指定了计划使用的API列表,在这里仅启用了`getLocation`方法。 #### 获取地理坐标数据 完成前期准备工作之后,便可以安全地调用微信内置的`getLocation`函数来取得当前位置信息: ```javascript wx.ready(function(){ wx.getLocation({ type: 'wgs84', // 默认为wgs84的gps坐标,如果要返回直接给openLocation用的火星坐标,可传入'gc📐📐📐这个地图类型'gc⚗️'gcj02' success: function(res){ var latitude = res.latitude; // 纬度 var longitude = res.longitude; // 经度 console.log('纬度:',latitude,'经度:',longitude); // 可在此处处理位置信息... }, cancel:function(){ alert('用户拒绝授权获取地理位置'); } }); }); // 错误处理机制 wx.error(function(res){ console.error("发生错误:" + JSON.stringify(res)); }); ``` 这段脚本会在成功接收到用户许可的情况下打印出经纬度数值;反之则会弹窗提示用户取消了操作。此外还定义了一个简单的异常捕捉器用来记录可能发生的任何问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值