<!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 new AMap.Map ( ' Container ' , {
Zoom: 10 ,
Center: [ 121 , 30 ]
});
// load the plug: Autocomplete map load triggers the callback is completed
AMap.plugin ( ' AMap.Autocomplete ' , function () {
// the console.log (. 1);
searchText.oninput = function () {
// the 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>
