老师 您好 帮我看看效果吧
来源：4-7 自由编程
小虾虾小
2019-10-30 16:28:21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自由编程4-7</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=cae1f6c32cb63e91eaf620502db545a4&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#search{
width: 250px;
height: 30px;
position: absolute;
top: 20px;
left: 20px;
}
#search input{
width: 100%;
height: 100%;
text-indent: 5px;
}
#searchBox{
width: 254px;
position: absolute;
top: 50px;
left: 20px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="search">
<input type="text" id="searchNode">
</div>
<div id="searchBox"></div>
<script type="text/javascript">
var map = new AMap.Map('container',{
zoom:10, //初始化地图的级别
center:[116.379391,39.861536] //初始化地图的中心点
});
var autocomplete = new AMap.Autocomplete({
input : 'searchNode'
});
var placeSearch = new AMap.PlaceSearch({
pageSize : 5,
pageIndex : 1,
city : '010',
cityLimit : true,
map : map,
panel : 'searchBox'
});
AMap.event.addListener(autocomplete,'select',function(e){
placeSearch.search(e.poi.name);
});
</script>
</body>
</html>
1回答
-
好帮手慕星星
2019-10-30
同学你好，
经测试搜索结果可以出来，很棒哦！
优化建议：在搜索框输入的时候，将上一次显示的列表隐藏。如下：
自己再测试下，祝学习愉快！
欢迎采纳~
0
相似问题