zoukankan      html  css  js  c++  java
  • 微信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是异步执行。

    日益努力,而后风生水起。众生皆苦,你也不能认输O(∩_∩)O
  • 相关阅读:
    new
    如何在win7上面安装python的包
    进程
    网络编程模块的使用
    面向对象基础与实例
    类与对象的属性与使用方法
    基础面向对象与面向过程
    RE模块垃圾回收机制
    常用函数模块
    thinkphp6 find_in_set使用实例
  • 原文地址:https://www.cnblogs.com/yingliyu/p/7189906.html
Copyright © 2011-2022 走看看