前幾天通過百度地圖的鼠標繪制工具，實現對多邊形的繪制並獲取各個點的坐標http://www.cnblogs.com/fozero/p/5912287.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" /> <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;} #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: 8px 8px 8px #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://api.map.baidu.com/api?v=2.0&ak=秘鑰"></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 BMap.Map("map"); map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); map.enableScrollWheelZoom();//啟用滾輪放大縮小，默認禁用 //單擊獲取點擊的經緯度 map.addEventListener("click",function(e){ $("#s-point").text(e.point.lng+","+e.point.lat); var marker = new BMap.Marker(e.point); map.addOverlay(marker); }); //map展現結果的地圖實例 //autoViewport檢索結束后是否自動調整地圖視野 var local = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}}); //地址檢索 function doSearch(){ var address = document.getElementById("address").value; local.search(address); //檢索結束后的回調方法 local.setSearchCompleteCallback(function(results){ // 判斷狀態是否正確 if (local.getStatus() == BMAP_STATUS_SUCCESS){ var str = "<ul>"; for (var i = 0; i < results.getCurrentNumPois(); i ++){ var poi = results.getPoi(i); // console.log(JSON.stringify(poi)); 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">'+poi.title+'</div>'; str+='<div>地址：<span class="rout">'+poi.address+'</span></div>'; str+='<div>坐標：<span class="point">'+poi.point.lng+","+poi.point.lat+'</span></div>'; str+='</div>'; str+='<div class="clearfix"></div>'; str+='</div>'; str+='</li>'; } str+='</ul>'; $("#result").html(str); $("#s-city").text(results.province+results.city); $("#s-point").text(results.getPoi(0).point.lng+","+results.getPoi(0).point.lat); } }); } </script>
在右上角輸入要檢索的地址，點擊檢索，將結果數據解析顯示到結果列表中
上面的String.fromCharCode(65+i)是循環26個大小英文字母，輸出A-Z
循環輸出26個小寫英文字母String.fromCharCode(97+i)，輸出a-z
左邊顯示標注ABC等 ，由於地址檢索接口結果列表顯示順序跟左邊顯示標注是一致的，所以，右邊如果也要同樣顯示ABC標注，我們直接循環輸出A-Z顯示即可
看下最后實現的樣子
