高德地圖實現地址檢索獲取結果列表和座標

時間 2019-11-21
原文原文鏈接
高德開放平臺http://lbs.amap.com/api/javascript-api/summary/javascript
以前使用百度地圖API實現地址檢索功能，獲取檢索結果並顯示到咱們自定義的列表中http://www.cnblogs.com/fozero/p/5924210.htmlcss
這裏咱們換成高德地圖一樣實現跟以前同樣的功能，高德跟百度地圖API仍是有很大的區別的，左邊的標註點這裏跟百度地圖的不一樣，我是手動在地圖上面對座標點標註，並設置它的文本和信息窗口對應右邊的結果列表數據，咱們直接看代碼：html
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
    <style type="text/css">
        body, html{width: 100%;height: 100%; font-family:"微軟雅黑";font-size: 14px;}
        *{ margin: 0;padding: 0;}
        .left{float:left;}
        .right{float:right;}
        .clearfix{clear: both;}
        .hide{display: none;}
        #map{height:628px;width: calc(100% - 305px);border: 1px solid #dadada;}
        /*地圖標註文本樣式*/
        .amap-marker-label{
            background:none;
            border: none;
            color: #fff;
        }
        #result{height: 520px; font-size: 13px; line-height: 20px;overflow: auto;color: #666;}
        #result ul {
            list-style: outside none none;
        }
        #result ul li{
            border-bottom: 1px solid #dadada;
            padding: 10px;
        }
        #result ul li:hover{
            background-color: #f0f0f0;
            cursor: pointer;
        }
        #result .res-data{
            background: url(img/ico_marker.png) no-repeat -1px 15px;
        }
        #result .res-marker{
            width: 30px; 
            height: 58px; 
            line-height: 58px; 
            text-align: center; 
            color: rgb(255, 255, 255); 
            font-weight: bold;
        }
        #result .res-address{
            width: 235px;
        }
        #result .title{
            font-size: 16px;
            color: #000000;
        }
        .area-right{
            width:303px;
        }
        .area-right .search{
             border-bottom: 1px solid #dadada;
            padding: 8px 0;
            box-shadow: 5px 2px 5px #888888;
            margin-bottom: 8px;
        }
        .area-right .search .s-address{
            margin-bottom: 5px;position: relative;border-bottom: 1px solid #DADADA;padding: 0 10px;height: 32px;line-height: 32px;
        }
        .area-right .search .s-address .btn{
            position: absolute;right: 10px;top: 5px;cursor: pointer;
        }
        .area-right .search .s-address .btn img{
            width: 22px;
        }
        .area-right .search .address{
            height: 28px;
            line-height: 28px;
            border: none;
            outline: medium;/*去掉鼠標點擊後的邊框*/
        }
        
        .area-right .search .cur_point{
            color: #1E90FF;padding: 0 10px;font-size: 13px;
        }
        .area-right .search .point{
            border:none;
        }
    </style>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=祕鑰&plugin=AMap.PlaceSearch"></script>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <title>本地搜索的數據接口</title>
</head>
<body>
    <div>
        <div class="left" id="map"></div>
        <div class="left area-right">
            <div class="search">
                <div class="s-address">
                    檢索地址：<input type="text" class="address" id="address" placeholder="望京SOHO"/>
                    <div onclick="doSearch();" class="btn"><img src="img/ico_btn_search.png"/></div>
                </div>
                <div class="cur_point">
                    當前座標：<span id="s-point"></span><br/>
                    當前檢索城市：<span id="s-city"></span>
                </div>
            </div>
            <div id="result">
                <!--<ul>
                    <li>
                        <div class="res-data">
                            <div class="left res-marker">
                                <span>A</span>
                            </div>
                            <div class="left res-address">
                                <div class="title">望京</div>
                                <div>地址：<span class="rout">地鐵14號線; 地鐵15號線</span></div>
                                <div>座標：<span class="point">116.475304,40.004532</span></div>
                            </div>
                            <div class="clearfix"></div>
                        </div>
                    </li>
                </ul>-->
            </div>
        </div>
        <div class="clearfix"></div>
    </div>
</body>
</html>
<script type="text/javascript">


    $(function(){
        
        //瀏覽器當前窗口文檔body的高度 
        var height = $(document.body).height();
        $("#map").css("height",(height-5)+"px");
        $("#result").css("height",(height-100)+"px");
        
        $("#address").val("");
        $("#result").on("click","li",function(){
            var point = $(this).find(".point").text();
            $("#s-point").text(point);//賦值
            $("#result li").css("background-color","#fff");
            $(this).css("background-color","#f0f0f0");
        });
        
        //綁定input文本框回車事件
        $('#address').bind('keypress',function(event){
            if(event.keyCode == "13"){
               doSearch();//搜索
            }
        });
    });
    
    //高德地圖API功能
    var map = new AMap.Map('map', {
        resizeEnable: true,
        zoom:11,
        center: [116.397428, 39.90923]
    });
    
    //爲地圖註冊click事件獲取鼠標點擊出的經緯度座標
    var clickEventListener = map.on('click', function(e) {
        document.getElementById("s-point").innerHTML = e.lnglat.getLng() + ',' + e.lnglat.getLat();
        marker = new AMap.Marker({
            icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
            position:[e.lnglat.getLng(),e.lnglat.getLat()]
        });
        marker.setMap(map);
    });
    
    
    var placeSearch = new AMap.PlaceSearch();  //構造地點查詢類
    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});//信息窗口
    var markers = [];//定義標註數組
    //地址查詢  
    function doSearch(){
        map.remove(markers);//查詢前先移除全部標註
        var address = document.getElementById("address").value;
        placeSearch.search(address, function(status, result) {
            if (status === 'complete' && result.info === 'OK') {
//               alert(JSON.stringify(result));
               var poiArr = result.poiList.pois;
               var str = "<ul>";
               for(var i=0;i<poiArr.length;i++){
                    //在地圖上建立標註點
                    marker = new AMap.Marker({
                        icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png"
                    });
                    marker.setPosition(new AMap.LngLat(poiArr[i].location.lng,poiArr[i].location.lat));
                    marker.setMap(map);
                    marker.setLabel({//label默認藍框白底左上角顯示，樣式className爲：amap-marker-label
                        offset: new AMap.Pixel(3, 0),//修改label相對於maker的位置
                        content: String.fromCharCode(65+i)
                    });
                    marker.content = poiArr[i].name+"<br/>"+poiArr[i].address;
                    marker.on('click', markerClick);
//                    marker.emit('click', {target:marker});
                    markers.push(marker);
                       
                       str+='<li>';
                        str+='<div class="res-data">';
                            str+='<div class="left res-marker">';
                                str+='<span>'+String.fromCharCode(65+i)+'</span>';
                            str+='</div>';
                            str+='<div class="left res-address">';
                                str+='<div class="title">'+poiArr[i].name+'</div>';
                                str+='<div>地址：<span class="rout">'+poiArr[i].address+'</span></div>';
                                str+='<div>座標：<span class="point">'+poiArr[i].location.lng+","+poiArr[i].location.lat+'</span></div>';
                            str+='</div>';
                            str+='<div class="clearfix"></div>';
                        str+='</div>';
                    str+='</li>';
               }
                str+='</ul>';
                $("#result").html(str);
                $("#s-point").text(poiArr[0].location.lng+","+poiArr[0].location.lat);
                //設置地圖顯示級別及中心點
                map.setZoomAndCenter(14,new AMap.LngLat(poiArr[0].location.lng,poiArr[0].location.lat));
                   //獲取查詢城市信息
                   map.getCity(function(res){
                       $("#s-city").text(res.province+res.city);
                   });
            
            }
        });
    }
    
    //點擊標註  顯示信息窗口及內容
    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    
</script>
最後看效果，有沒有發現高德和百度地圖風格不太同樣java
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。