效果展示：
PS：請把js引入部分的key值換成你申請下來的密鑰，要不然不能用（無法進行定位搜索）
申請地址：http://lbs.amap.com/
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>輸入提示后查詢，點擊獲取坐標</title>
<style type="text/css"> #mapContainer{ position: absolute; top:0; left: 0; right:0; bottom:0;
} #tip{ background-color:#fff; border:1px solid #ccc; padding-left:10px; padding-right:2px; position:absolute; min-height:65px; top:10px; font-size:12px; right:10px; border-radius:3px; overflow:hidden; line-height:20px; min-width:30%;
} #tip input[type="button"]{ background-color: #0D9BF2; height:25px; text-align:center; line-height:25px; color:#fff; font-size:12px; border-radius:3px; outline: none; border:0; cursor:pointer;
} #tip input[type="text"]{ height:25px; border:1px solid #ccc; padding-left:5px; border-radius:3px; outline:none;
} #pos{ height: 110px; background-color: #fff; padding-left: 10px; padding-right: 10px; position:absolute; font-size: 12px; right: 10px; bottom: 30px; border-radius: 3px; line-height: 30px; border:1px solid #ccc;
} #pos input{ border:1px solid #ddd; height:23px; border-radius:3px; outline:none; width: 100px;
} #result1{ max-height:300px;
} b{ display: block;margin: 5px 0;
}
</style>
</head>
<body>
<div style="width: 500px;height: 500px;position: relative;">
<div id="mapContainer"></div>
<div id="tip">
<b>請輸入關鍵字：</b>
<input type="text" id="keyword" name="keyword" value="" onkeydown='keydown(event)' style="width: 95%;"/>
<div id="result1" name="result1"></div>
</div>
<div id="pos">
<b>鼠標左鍵在地圖上單擊獲取坐標</b>
<div>X：<input type="text" id="lngX" name="lngX" value=""/> Y：<input type="text" id="latY" name="latY" value=""/></div>
<div>城市：<input type="text" id="city" name="city" value=""/></div>
</div>
</div>
<!--請把js引入部分的key值換成你申請下來的，要不然不能用哦~~-->
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=84a1f826e2e135184370cddc9e7848acluo"></script>
<script type="text/javascript">
var windowsArr = []; var marker = []; var mapObj = new AMap.Map("mapContainer", { resizeEnable: true, view: new AMap.View2D({ resizeEnable: true, zoom:13//地圖顯示的縮放級別
}), keyboardEnable:false }); var clickEventListener=AMap.event.addListener(mapObj,'click',function(e){ console.log(e); document.getElementById("lngX").value=e.lnglat.getLng(); document.getElementById("latY").value=e.lnglat.getLat(); AMap.service('AMap.Geocoder',function(){//回調函數
//實例化Geocoder
geocoder = new AMap.Geocoder({ city: ""//城市，默認：“全國”
}); var lnglatXY=[e.lnglat.getLng(), e.lnglat.getLat()];//地圖上所標點的坐標
geocoder.getAddress(lnglatXY, function(status, result) { if (status === 'complete' && result.info === 'OK') { //獲得了有效的地址信息:
//即，result.regeocode.formattedAddress
//console.log(result);
var city = result.regeocode.addressComponent.city; }else{ var city = '獲取失敗'; //獲取地址失敗
} document.getElementById("city").value=city; console.log(city); }); }) }); document.getElementById("keyword").onkeyup = keydown; //輸入提示
function autoSearch() { var keywords = document.getElementById("keyword").value; var auto; //加載輸入提示插件
AMap.service(["AMap.Autocomplete"], function() { var autoOptions = { city: "" //城市，默認全國
}; auto = new AMap.Autocomplete(autoOptions); //查詢成功時返回查詢結果
if ( keywords.length > 0) { auto.search(keywords, function(status, result){ autocomplete_CallBack(result); }); } else { document.getElementById("result1").style.display = "none"; } }); } //輸出輸入提示結果的回調函數
function autocomplete_CallBack(data) { var resultStr = ""; var tipArr = data.tips; if (tipArr&&tipArr.length>0) { for (var i = 0; i < tipArr.length; i++) { resultStr += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById(" + (i + 1) + ",this)' onclick='selectResult(" + i + ")' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 13px;cursor:pointer;padding:5px 5px 5px 5px;\"" + "data=" + tipArr[i].adcode + ">" + tipArr[i].name + "<span style='color:#C1C1C1;'>"+ tipArr[i].district + "</span></div>"; } } else { resultStr = " π__π 親,人家找不到結果!<br />要不試試：<br />1.請確保所有字詞拼寫正確<br />2.嘗試不同的關鍵字<br />3.嘗試更寬泛的關鍵字"; } document.getElementById("result1").curSelect = -1; document.getElementById("result1").tipArr = tipArr; document.getElementById("result1").innerHTML = resultStr; document.getElementById("result1").style.display = "block"; } //輸入提示框鼠標滑過時的樣式
function openMarkerTipById(pointid, thiss) { //根據id打開搜索結果點tip
thiss.style.background = '#CAE1FF'; } //輸入提示框鼠標移出時的樣式
function onmouseout_MarkerStyle(pointid, thiss) { //鼠標移開后點樣式恢復
thiss.style.background = ""; } //從輸入提示框中選擇關鍵字並查詢
function selectResult(index) { if(index<0){ return; } if (navigator.userAgent.indexOf("MSIE") > 0) { document.getElementById("keyword").onpropertychange = null; document.getElementById("keyword").onfocus = focus_callback; } //截取輸入提示的關鍵字部分
var text = document.getElementById("divid" + (index + 1)).innerHTML.replace(/<[^>].*?>.*<\/[^>].*?>/g,""); var cityCode = document.getElementById("divid" + (index + 1)).getAttribute('data'); document.getElementById("keyword").value = text; document.getElementById("result1").style.display = "none"; //根據選擇的輸入提示關鍵字查詢
mapObj.plugin(["AMap.PlaceSearch"], function() { var msearch = new AMap.PlaceSearch(); //構造地點查詢類
AMap.event.addListener(msearch, "complete", placeSearch_CallBack); //查詢成功時的回調函數
msearch.setCity(cityCode); //console.log(cityCode);
msearch.search(text); //關鍵字查詢查詢
}); } //定位選擇輸入提示關鍵字
function focus_callback() { if (navigator.userAgent.indexOf("MSIE") > 0) { document.getElementById("keyword").onpropertychange = autoSearch; } } //輸出關鍵字查詢結果的回調函數
function placeSearch_CallBack(data) { //清空地圖上的InfoWindow和Marker
windowsArr = []; marker = []; mapObj.clearMap(); var resultStr1 = ""; var poiArr = data.poiList.pois; var resultCount = poiArr.length; for (var i = 0; i < resultCount; i++) { resultStr1 += "<div id='divid" + (i + 1) + "' onmouseover='openMarkerTipById1(" + i + ",this)' onmouseout='onmouseout_MarkerStyle(" + (i + 1) + ",this)' style=\"font-size: 12px;cursor:pointer;padding:0px 0 4px 2px; border-bottom:1px solid #C1FFC1;\"><table><tr><td><img src=\"http://webapi.amap.com/images/" + (i + 1) + ".png\"></td>" + "<td><h3><font color=\"#00a6ac\">名稱: " + poiArr[i].name + "</font></h3>"; resultStr1 += TipContents(poiArr[i].type, poiArr[i].address, poiArr[i].tel) + "</td></tr></table></div>"; addmarker(i, poiArr[i]); } mapObj.setFitView(); } //鼠標滑過查詢結果改變背景樣式，根據id打開信息窗體
function openMarkerTipById1(pointid, thiss) { thiss.style.background = '#CAE1FF'; windowsArr[pointid].open(mapObj, marker[pointid]); } //添加查詢結果的marker&infowindow
function addmarker(i, d) { var lngX = d.location.getLng(); var latY = d.location.getLat(); var markerOption = { map:mapObj, icon:"http://webapi.amap.com/images/" + (i + 1) + ".png", position:new AMap.LngLat(lngX, latY) }; var mar = new AMap.Marker(markerOption); marker.push(new AMap.LngLat(lngX, latY)); var infoWindow = new AMap.InfoWindow({ content:"<h3><font color=\"#00a6ac\"> " + (i + 1) + ". " + d.name + "</font></h3>" + TipContents(d.type, d.address, d.tel), size:new AMap.Size(300, 0), autoMove:true, offset:new AMap.Pixel(0,-30) }); windowsArr.push(infoWindow); var autoData = function (e) { var nowPosition = mar.getPosition(), lng_str = nowPosition.lng, lat_str = nowPosition.lat; infoWindow.open(mapObj, nowPosition); document.getElementById("lngX").value = lng_str; document.getElementById("latY").value = lat_str; AMap.service('AMap.Geocoder',function(){//回調函數
//實例化Geocoder
geocoder = new AMap.Geocoder({ city: ""//城市，默認：“全國”
}); var lnglatXY=[lng_str, lat_str];//地圖上所標點的坐標
geocoder.getAddress(lnglatXY, function(status, result) { if (status === 'complete' && result.info === 'OK') { //獲得了有效的地址信息:
//即，result.regeocode.formattedAddress
//console.log(result);
var city = result.regeocode.addressComponent.city; }else{ var city = '獲取失敗'; //獲取地址失敗
} document.getElementById("city").value=city; console.log(city); }); }) }; AMap.event.addListener(mar, "mouseover", autoData); } //infowindow顯示內容
function TipContents(type, address, tel) { //窗體內容
if (type == "" || type == "undefined" || type == null || type == " undefined" || typeof type == "undefined") { type = "暫無"; } if (address == "" || address == "undefined" || address == null || address == " undefined" || typeof address == "undefined") { address = "暫無"; } if (tel == "" || tel == "undefined" || tel == null || tel == " undefined" || typeof address == "tel") { tel = "暫無"; } var str = " 地址：" + address + "<br /> 電話：" + tel + " <br /> 類型：" + type; return str; } function keydown(event){ var key = (event||window.event).keyCode; var result = document.getElementById("result1") var cur = result.curSelect; if(key===40){//down
if(cur + 1 < result.childNodes.length){ if(result.childNodes[cur]){ result.childNodes[cur].style.background=''; } result.curSelect=cur+1; result.childNodes[cur+1].style.background='#CAE1FF'; document.getElementById("keyword").value = result.tipArr[cur+1].name; } }else if(key===38){//up
if(cur-1>=0){ if(result.childNodes[cur]){ result.childNodes[cur].style.background=''; } result.curSelect=cur-1; result.childNodes[cur-1].style.background='#CAE1FF'; document.getElementById("keyword").value = result.tipArr[cur-1].name; } }else if(key === 13){ var res = document.getElementById("result1"); if(res && res['curSelect'] !== -1){ selectResult(document.getElementById("result1").curSelect); } }else{ autoSearch(); } } </script>
</body>
</html>