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是异步执行。

  • 相关阅读:
    iOS resign code with App Store profile and post to AppStore
    HTTPS科普扫盲帖 对称加密 非对称加密
    appid 评价
    使用Carthage安装第三方Swift库
    AngularJS:何时应该使用Directive、Controller、Service?
    xcode7 The operation couldn't be completed.
    cocoapods pod install 安装报错 is not used in any concrete target
    xcode7 NSAppTransportSecurity
    learning uboot how to set ddr parameter in qca4531 cpu
    learning uboot enable protect console
  • 原文地址:https://www.cnblogs.com/imelemon/p/7189906.html
Copyright © 2011-2022 走看看