微信公眾號-定位之地址逆解析&導航

在微信JS_SDK工具包中為我們提供了地理定位的功能，但是該接口只返回了經緯度並沒有返回准確的位置信息，此時我們可以通過調用騰訊地圖的方法進行地址逆解析。

1. 獲取地理位置接口

        wx.ready(function() {
            wx.getLocation({
                type: 'wgs84', // 默認為wgs84的gps坐標，如果要返回直接給openLocation用的火星坐標，可傳入'gcj02'
                success: function(res) {
                    // alert(JSON.stringify(res))
                    let lat = res.latitude; // 緯度，浮點數，范圍為90 ~ -90
                    let lng = res.longitude; // 經度，浮點數，范圍為180 ~ -180。
                    
                }
            });
        
        });

2. 地址逆解析

　　在頁面中引入騰訊地圖相關的js,這里的key你可以自己去申請

<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=Z4MBZ-N3BHJ-NKSFN-FQ3U3-HLUOZ-KTFB3"></script>

　　地址逆解析代碼

geocoder = new qq.maps.Geocoder({
    complete:function(result){
        console.log(JSON.stringify(result.detail));
    }
});
var coord=new qq.maps.LatLng(lat, lng);
geocoder.getAddress(coord)

console.log(JSON.stringify(result.detail));結果如下：

{
    "address":"中國浙江省杭州市濱江區泰安路239號",
    "addressComponents":{
        "country":"中國",
        "province":"浙江省",
        "city":"杭州市",
        "district":"濱江區",
        "street":"泰安路",
        "streetNumber":"泰安路239號",
        "town":"西興街道",
        "village":""
    },
    "location":{
        "lat":30.21,
        "lng":120.21
    },
    "nearPois":[
        {
            "latLng":{
                "lat":30.209749,
                "lng":120.20974
            },
            "id":"6786134103275397876",
            "name":"杭州市濱江區文化中心",
            "address":"浙江省杭州市濱江區泰安路200號",
            "category":"文化場館:文化宮",
            "dist":0,
            "type":0
        }
    ]
}

使用微信內置地圖查看位置接口，導航功能

$('.postion')導航按鈕，這里需要注意的是如果不是float類型IOS不能調起導航

$('.postion').on('click',function(){
    wx.openLocation({
        longitude: parseFloat(res.shops.longitude),//必須是float類型
        latitude: parseFloat(res.shops.latitude),
        name: res.shops.designation,//目的地的名稱
        address: res.shops.province+res.shops.city+res.shops.district+res.shops.address //目的地的地址
    }) 
})

效果圖如下：