tp5 騰訊地圖 - 將物理(詳細)地址轉換爲經緯度座標

由於要批量將物理地址轉換爲經緯度座標,所以在度娘那找了一下再優化了一下,單個獲取實現了。

批量還遠嗎?批量的就讓自己自由發揮吧!

下面記得引入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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章