高德开放平台http://lbs.amap.com/api/javascript-api/summary/
之前使用百度地图API实现地址检索功能，获取检索结果并显示到我们自定义的列表中http://www.cnblogs.com/fozero/p/5924210.html
这里我们换成高德地图同样实现跟之前一样的功能，高德跟百度地图API还是有很大的区别的，左边的标注点这里跟百度地图的不同，我是手动在地图上面对坐标点标注 ，并设置它的文本和信息窗口对应右边的结果列表数据，我们直接看代码：
<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>
最后看效果，有没有发现高德和百度地图风格不太一样
