老师，请检查！
来源：8-11 自由编程
慕虎0371676
2021-05-24 23:21:38
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=604633d9f1129aae736ee2ed7fd9bdd5&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Scale,AMap.ToolBar,AMap.Walking,AMap.TruckDriving,AMap.Riding,AMap.Transfer,AMap.Driving"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
*{
margin:0;
padding:0;
}
#container{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.outerNode{
width:470px;
height:295px;
background:#3591ff;
position:absolute;
top:20px;
left:20px;
}
.iconNode{
width:200px;
margin:24px auto;
}
.fa{
width:16px;
height:16px;
font-size:18px;
display:inline-block;
color:#bcdcff;
}
.fa-car,.fa-bus{
margin-right:57px;
}
.searchNode{
width:320px;
margin:0 auto;
}
input{
width:320px;
height:40px;
margin:0 auto;
border:none;
color:#fff;
background-color:#2d85f1;
}
#endNode,#startNode{
margin-top:20px;
}
input::-webkit-input-placeholder {
/* WebKit browsers */
color: #fff;
padding-left:10px;
}
#btn{
width:105px;
height:40px;
background-color:#489dfd;
color:#fff;
border:none;
margin:24px 0 0 286px;
cursor:pointer;
}
.fa-active{
color:#fff;
}
#panel{
position:absolute;
top:315px;
left:20px;
width:470px;
background-color:#fff;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="outerNode">
<div class="iconNode">
<i class="fa fa-car fa-active"></i>
<i class="fa fa-bus"></i>
<i class="fa fa-bicycle"></i>
</div>
<div class="searchNode">
<input type="text" id="startNode" name="" placeholder="起 请输入起点"><br>
<input type="text" id="endNode" name="" placeholder="终 请输入终点"><br>
</div>
<input type="button" id="btn" name="" value="开车去">
</div>
<div id="panel"></div>
<script type="text/javascript">
var map=new AMap.Map('container',{
zoom:11,
center:[116.379376,39.759789]
});
//点击切换交通工具
var faCar=document.querySelector('.fa-car'),
faBus=document.querySelector('.fa-bus'),
faBic=document.querySelector('.fa-bicycle');
faCar.onclick=function(){
this.className='fa fa-car fa-active';
faBus.className='fa fa-bus';
faBic.className='fa fa-bicycle';
btn.value='开车去';
}
faBus.onclick=function(){
faCar.className='fa fa-car';
this.className='fa fa-bus fa-active';
faBic.className='fa fa-bicycle';
btn.value='坐公交';
}
faBic.onclick=function(){
faCar.className='fa fa-car';
faBus.className='fa fa-bus';
this.className='fa fa-bicycle fa-active';
btn.value='骑车去';
}
//点击搜索按钮
btn.onclick=function(){
map.clearMap();
if(this.value==="开车去"){
new AMap.Driving({
map:map,
panel:'panel'
}).search([{
keyword:startNode.value,city:'北京'
},{
keyword:endNode.value,city:'北京'
}],function(status,data){
console.log(data);
});
}else if(this.value==="坐公交"){
new AMap.Transfer({
map:map,
panel:'panel'
}).search([{
keyword:startNode.value,city:'北京'
},{
keyword:endNode.value,city:'北京'
}],function(status,data){
console.log(data);
});
}else{
new AMap.Riding({
map:map,
panel:'panel'
}).search([{
keyword:startNode.value,city:'北京'
},{
keyword:endNode.value,city:'北京'
}],function(status,data){
console.log(data);
});
}
}
</script>
</body>
</html>
1回答
-
好帮手慕星星
2021-05-25
同学你好，功能是可以的，但是还需要优化：
当点击坐车去，然后切换公交再点击，可以看到两部分文字路线都显示，这是不对的
建议显示前先清除掉原来的，可以将panel清空
自己测试下，祝学习愉快！
0
相似问题