老师检查一下
来源：4-7 自由编程
慕斯卡3605978
2020-06-30 16:37:29
<!DOCTYPE html>
<html>
<head>
<title>我的第一个地图</title>
<meta charset="utf-8">
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=3bc10fa80d2612efad6d45019651e498"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.input{
position: absolute;
top: 20px;
left: 20px;
}
.input input{
width: 250px;
height: 25px;
text-indent: 1em;
}
#poiItems{
width: 251px;
position: absolute;
top: 46px;
left: 20px;
background-color: #fff;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="input"><input type="text" name="" id="iptVal"></div>
<div id="poiItems"></div>
<script type="text/javascript">
var map = new AMap.Map('container');
var searchNode = null,
placeSearch = null;
//引入输入提示插件
AMap.plugin('AMap.Autocomplete',function(){
searchNode = new AMap.Autocomplete({
input:'iptVal'
});
});
//引入地点搜索服务插件
AMap.service(['AMap.PlaceSearch'],function(){
placeSearch = new AMap.PlaceSearch({
map:map,
panel:'poiItems',
pageSize:5
});
});
//给搜索框绑定事件
AMap.event.addListener(searchNode,'select',function(e){
placeSearch.search(e.poi.name);
});
</script>
</body>
</html>
1回答
-
同学你好，代码正确，可做如下优化：
input框输入内容时，可以让后面的列表隐藏，如下：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
