微信获取经纬度并格式化

新建路由

Route::post('/get/wx/js/sdk', 'JsSdk');

TP6控制器

// 获取JS-sdk
public function JsSdk () {
    $url = $_POST['url'];
     # 前台获取的当前页面地址
    $json = getJsSdk($url);
    # JS-SDK获取函数
    return json($json);
    # 返回值
}

前台使用

引入js

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

使用

$.ajax({
    url: "/h5/get/wx/js/sdk",
    type: "POST",
    data:{
        // 获取当前页面地址
        'url': window.location.href


    },
    dataType: "json",
    success: function (result) {
        console.log(result)
        wx.config({
            // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            debug: false,
            // 必填，公众号的唯一标识
            appId: result.appid,
            // 必填，生成签名的时间戳
            timestamp: "" + result.timestamp,
            // 必填，生成签名的随机串timestamp
            nonceStr: result.nonceStr,
            // 必填，签名，见附录1
            signature: result.signature,
            // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            jsApiList: ['checkJsApi', 'getLocation']
        });
        wx.error(function (res) {
            alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
        });
        // 获取地理位置
        wx.getLocation({
            // 火星坐标系
            type: 'gcj02',


            success: function (res) {
                // 纬度
                var latitude = res.latitude;
                // 经度
                var longitude = res.longitude;
                console.log(latitude+","+longitude);
            },
            cancel: function (res) {
                console.log('用户拒绝授权');
            }
        });
    }
})

如上，微信用户访问页面时，会提示授权。同意后，就可以获得用户的经纬度。但很显然，仅仅有经纬度，还是不够的。因此，需要将经纬度，转换为详细地址。我试了前端方式，但总是报跨域，索性就用后端写了。

登录腾讯地图API，创建key，并设置白名单

点击前往 控制台>应用管理>创建应用>编辑应用，就可以设置白名单了，有三种方式，常用的有授权地址，以及授权IP

后台将坐标系转换为实际地址

新建路由

Route::post('/get/tx/dizhi', 'TxDizhi');

TP6控制器

public function TxDizhi () {
    $latitude = $_POST['latitude'];
    $longitude = $_POST['longitude'];
    $dizhi = getCurl("https://apis.map.qq.com/ws/geocoder/v1/?location={$latitude},{$longitude}&key=5CCBZ-W7UW2-IJCUU-C4UTC-YI5F2-2NF66&get_poi=1");
    return json($dizhi);
}

前台使用

// 获取地理位置
wx.getLocation({
    type: 'gcj02',
    // 火星坐标系
    success: function (res) {
        // 纬度
        var latitude = res.latitude;
        // 经度
        var longitude = res.longitude;
        // 请求转换地址接口
        $.ajax({
               url: "/h5/get/tx/dizhi",
               type: "POST",
               data:{
                     'latitude': latitude,
                     'longitude': longitude
               },
               dataType: "json",
               success: function (data) {
                     // 行政区
                     console.log(data.result.address)
                     // 县市名
                     console.log(data.result.address_component.district)
                     // 人性化具体位置说明，如神话KTV东南50米
                     console.log(data.result.formatted_addresses.recommend)
                }             
        })
    },
    cancel: function (res) {
        console.log('用户拒绝授权');
    }
});