tp5 腾讯地图 - 将物理（详细）地址转换为经纬度坐标

最新推荐文章于 2024-05-06 09:47:02 发布

逸曦穆泽

最新推荐文章于 2024-05-06 09:47:02 发布

阅读量1.3k

点赞数

分类专栏： web前端 php

本文链接：https://blog.csdn.net/qq_41408081/article/details/92083628

版权

web前端同时被 2 个专栏收录

65 篇文章 2 订阅

订阅专栏

php

43 篇文章 0 订阅

订阅专栏

由于要批量将物理地址转换为经纬度坐标，所以在度娘那找了一下再优化了一下，单个获取实现了。

批量还远吗？批量的就让自己自由发挥吧！

下面记得引入jquery ，还有tp5我是开启路由的，就是这两段ajax的url

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=6LLBZ-QMLCX-HNA4L-T3ADN-4O3V5-BFFLB"></script>
    <script src="/public/static/js/jquery-1.8.3.min.js"></script>
    <title>物理地址转换成经纬度(map)</title>
    <style>
         body {font: 12px/16px Verdana, Helvetica, Arial, sans-serif;}
        .dv_map{text-align: center;}
        .mid_text{width:360px;}
        .mid_btn{color:#0f77ea;cursor: pointer;transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1) 0s;}
        .mid_btn:hover{color:#fff;background: #0f77ea;transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1) 0s;}
        .mid_btn:active{color:#ffc;background: #0000FF;transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1) 0s;}
        .ipt{display: inline-block;padding:5px 9px;border-radius: 6px;outline: 0;border: 1px solid #bcbcbc;}
    </style>
</head>

<body>
    <div class="dv_map">
       <!-- <input class="ipt mid_text" id="getAddress" type="text" name="location"  value=""  />-->
        <input class="ipt mid_btn" id="getBtn" type="button" value="获取坐标" />
        <br>
        <div class="latlng"></div>
        <input class="ipt mid_tet" type="hidden" name="latlng" value="" readonly />
    </div>
    <script>
        var geocoder= null;
        $("#getBtn").click(function(){
            //let address = $("#getAddress").val();
            $.ajax({
                type: 'get',
                url: 'setAddress',
                dataType: 'json',
                success: function (data) {
                    for(var i = 0; i < data.length; i++){
                        //console.log(i+data[i]);
                        if(data[i] !== ''){
                            geocoder = new qq.maps.Geocoder();
                            geocoder.getLocation(data[i]); //对指定地址进行解析
                            //设置服务请求成功的回调函数
                            geocoder.setComplete(function(result) {
                                //console.log(result.detail.location);
                                let lat = result.detail.location.lat; //经度
                                let lng = result.detail.location.lng; //纬度
                                //$('.latlng').html("lat: "+lat+"  lng: "+lng);
                                $.ajax({
                                    type: 'get',
                                    url: 'getAddress',
                                    data: {'lat': lat, 'lng': lng},
                                    dataType: 'json',
                                    success: function (res) {
                                        console.log(res)
                                    },
                                    error:function () {
                                        alert('请联系管理员！')
                                    }
                                });
                            });
                           //若服务请求失败，则运行以下函数
                           geocoder.setError(function() {
                               alert("抱歉，出错了");
                           });
                       }else{
                           alert('地址为空? 请输入地址!');
                       }
                    }
                },
                error:function () {
                    alert('请联系管理员！')
                }
            });
     });
    </script>
</body>
</html>

controller -> 类 -> 方法（两个接口）：

 //设置地址
    public function setAddress(){
        $da = array( '深圳市特区报社报业大厦', '深圳市平安中心', '深圳市购物公园', '深圳市会展中心');
        return $da;
    }
    //获取经纬度坐标
    public function getAddress(){
        $lat = input('lat');
        $lng = input('lng');
        if($lat == '' && $lng == ''){
            return '参数为空的！';
        }else{
            return $lat.' '.$lng;
        }
    }

参考：https://blog.csdn.net/Amy_cloud/article/details/78727432

逸曦穆泽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
tp5 腾讯地图 - 将物理（详细）地址转换为经纬度坐标

由于要批量将物理地址转换为经纬度坐标，所以在度娘那找了一下再优化了一下，单个获取实现了。批量还远吗？批量的就让自己自由发挥吧！下面记得引入jquery ，还有tp5我是开启路由的，就是这两段ajax的urlhtml:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF...
复制链接

扫一扫