<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>高德地图</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce"></script> <style type="text/css"> *{ margin: 0; padding: 0; list-style: none; } #container{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; } #setZoomNode,#setCenterNode{ width: 300px; height: 500px; position: absolute; z-index: 99; right: 20px; top: 20px; border: 1px solid black; box-shadow: 0 0 5px black; background: white; } #node li{ cursor: pointer; } </style> </head> <body> <div id="container"></div> <div id="setCenterNode"> <input type="text" id="searchText"/> <ul id="node"></ul> </div> <script type="text/javascript"> var map = new AMap.Map('container',{ zoom:10, center:[121,30] }); //加载插件:Autocomplete 地图加载完毕 会触发的回调函数 AMap.plugin('AMap.Autocomplete',function(){ //console.log(1); searchText.oninput = function(){ //console.log(this.value); node.innerHTML = ''; if(this.value == ''){ return; } new AMap.Autocomplete().search(this.value,function(status,data){ //console.log(data); for(var i = 0;i < data.tips.length;i++){ var oLi = document.createElement('li'); oLi.innerHTML = data.tips[i].name; oLi.P = data.tips[i].location.P; oLi.Q = data.tips[i].location.Q; node.appendChild(oLi); oLi.onclick = function(){ //console.log(this.P,this.R); map.setCenter([this.Q,this.P]); }; } }); }; }); </script> </body> </html>