高德開放平台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> 最後看效果，有沒有發現高德和百度地圖風格不太一樣
