搜索结果重复显示
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{list-style: none}
#container{
width: 600px;
height: 500px;
}
.searchText{
position: absolute;
top: 20px;
left: 20px;
height: 25px;
width: 200px;
}
.result{
position: absolute;
top: 50px;
height: 300px;
width: 200px;
}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=05c87397bd2fbeb35740bc71f116f932"></script>
</head>
<body>
<div id="container"></div>
<input type="text" class="searchText">
<ul class="result"></ul>
<script type="text/javascript">
var myMap = new AMap.Map('container');
var searchText = document.querySelector('.searchText');
var result = document.querySelector('.result');
AMap.plugin('AMap.Autocomplete',function(){
searchText.oninput = function(){
result.innerHTML = '';
if(this.value == ''){return;}
new AMap.Autocomplete().search(this.value,function(status,data){
console.log(data.tips);
for(var i=0;i<data.tips.length;i++){
console.log(data.tips.length);
//console.log(data.tips[i]);
var myli = document.createElement('li');
myli.innerHTML = data.tips[i].name;
mylng = data.tips[i].location.lng;
mylat = data.tips[i].location.lat;
result.appendChild(myli);
myli.onclick = function(){
myMap.setCenter([mylng,mylat]);
myMap.setZoom(15);
}
}
})
}
})
</script>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星