老师检查！
来源：8-11 自由编程
慕标5156652
2020-07-24 11:10:58
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=4f1afc56291f03238d68e6ad475ec0b1&plugin=AMap.Transfer,AMap.Autocomplete,AMap.Riding,AMap.Driving"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#container {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
#panel {
position: fixed;
background: white;
top: 10px;
right: 10px;
width: 280px;
}
#search {
width: 300px;
height: 200px;
border: 1px solid black;
position: absolute;
left: 10px;
top: 20px;
z-index: 3;
background-color: #649ff7;
}
#search .icon i {
display: inline-block;
width: 80px;
height:30px;
line-height: 30px;
text-align: center;
margin-left: 15px;
}
.start{
position: absolute;
width: 200px;
height:30px;
line-height: 30px;
text-align: center;
top: 40px;
left: 50px;
}
.end{
position: absolute;
width: 200px;
height: 30px;
line-height: 30px;
text-align: center;
top: 80px;
left: 50px;
}
.btn{
position: absolute;
width: 50px;
height: 20px;
line-height: 20px;
text-align: center;
top: 120px;
right:60px;
border: 1px solid #679ded;
background-color: #76acf9;
}
#panel{
width: 300px;
height: auto;
position: absolute;
top:20;
right: 20px;
background: #fff;
overflow-x: scroll;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="search">
<div class="icon">
<i class="fa fa-car active"></i>
<i class="fa fa-bus"></i>
<i class="fa fa-bicycle"></i>
</div>
<div class="start">起点<input type="text" id="startNode" placeholder="请输入起点"></div>
<div class="end">终点<input type="text" id="endNode" placeholder="请输入终点"> </div>
<div class="btn" id="btn">开车去</div>
</div>
<div id="panel"></div>
<script>
var map = new AMap.Map("container", {
zoom: 11,
center: [116.379391, 39.861536]
});
new AMap.Autocomplete({
input: "startNode"
});
new AMap.Autocomplete({
input: "endNode"
});
var btnText=["开车去","坐公交","骑车去"];
var icon=document.getElementsByClassName("fa");
var index=0;
for(var i=0;i<icon.length;i++){
icon[i].setAttribute("data-id",i);
icon[i].onclick=function(){
index=this.getAttribute("data-id");
btn.innerHTML=btnText[index];
for(var j=0;j<icon.length;j++){
icon[j].style.opacity=0.3;
}
this.style.opacity=1;
btn.innerHTML=btnText[index];
}
}
btn.onclick=function(){
if(startNode.value=="" && endNode.value==""){
alert("请输入起点和终点");
return;
}
if(btn.innerHTML=="开车去"){
new AMap.Driving({
map:map,
panel:"panel",
}).search([
{keyword:startNode.value,city:"北京"},
{keyword:endNode.value,city:"北京"}
],function(status,data){});
map.clearMap();
}else if(btn.innerHTML=="坐公交"){
new AMap.Transfer({
map:map,
panel:"panel",
}).search([
{keyword:startNode.value,city:"北京"},
{keyword:endNode.value,city:"北京"}
],function(status,data){});
map.clearMap();
}else if(btn.innerHTML=="骑车去"){
new AMap.Riding({
map:map,
panel:"panel",
}).search([
{keyword:startNode.value,city:"北京"},
{keyword:endNode.value,city:"北京"}
],function(status,data){});
map.clearMap();
}else{
alert("请选择到达方式");
}
}
</script>
</body>
</html>
2回答
-
好帮手慕星星
2020-07-24
同学你好，测试效果如下
起点和终点文字位置需要调整，建议将盒子start和end盒子宽度设置大一些。参考
当输入内容显示路径的时候，列表在右侧
建议调整到输入框下面
另外，把这个 map.clearMap();改为这个panel.innerHTML=""是可以的，哪个方式的路径显示没有问题，很棒。
祝学习愉快！
0 -
慕标5156652
提问者
2020-07-24
优化：把这个 map.clearMap();
改为这个panel.innerHTML=""
好像效果要好点 不会在切换交通方式的时候保存之前的panel内容
0
相似问题