获取微信位置并转化为详细地址

后台获取js-sdk

获取js-sdk教程

新建路由

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('用户拒绝授权');
    }
});

API地址

逆地址解析

js-sdk

给TA买糖
共{{data.count}}人
人已赞赏
tp6-边用边总结

tp6缓存

2021-7-13 15:07:13

tp6-边用边总结

tp6加密解密

2021-7-16 18:32:14

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索