<!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{
100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#setZoomNode,#setCenterNode{
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>
