微信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是異步執行。