麻烦老师检查！
来源：8-11 自由编程
前端菜鸟HH
2020-09-19 09:41:19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>出行方式切换</title>
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
input{
outline: none;
border: 0;
}
#container{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/* 搜索框 */
.searchBox{
width: 300px;
height: 220px;
background: rgb(0, 132, 255);
position: absolute;
z-index: 1;
top: 20px;
left: 10px;
}
.travelMode{
width: 200px;
display: flex;
justify-content: space-between;
margin: 20px auto 10px;
}
.travelMode > a{
color: rgba(255,255,255,.7);
padding: 10px;
}
.travelMode > a:hover,
.travelMode > a.active{
color: rgba(255,255,255,1);
}
.travelLine{
width: 220px;
height: 24px;
line-height: 24px;
padding: 6px 8px;
margin: 0 auto 10px;
background: rgba(0,0,0,.1);
color: #fff;
}
.travelLine .travelTitle{
font-size: 12px;
width: 30px;
display: inline-block;
text-align: center;
}
.travelLine input{
background: none;
color: #fff;
height: 22px;
line-height: 22px;
vertical-align: middle;
}
#travelBtn{
width: 90px;
height: 30px;
line-height: 30px;
border: 0;
background: rgba(255,255,255,.4);
color: #fff;
float: right;
margin: 8px 32px 0 0;
cursor: pointer;
}
/* 搜索结果显示 */
#panel{
width: 300px;
height: auto;
position: absolute;
z-index: 1;
background: #fff;
top: 240px;
left: 10px;
}
</style>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=75776648e2fd2fd601c4de9518b89b65&plugin=AMap.Autocomplete,AMap.Driving,AMap.Transfer,AMap.Riding"></script>
</head>
<body>
<div id="container">
<div class="searchBox">
<div class="travelMode">
<a href="javascript:;" class="active" title="开车去"><i class="fa fa-car"></i></a>
<a href="javascript:;" title="坐公交"><i class="fa fa-bus"></i></a>
<a href="javascript:;" title="骑车去"><i class="fa fa-bicycle"></i></a>
</div>
<div class="travelLine">
<label class="travelTitle">起</label>
<input type="text" placeholder="请输入起点" id="startNode" />
</div>
<div class="travelLine">
<label class="travelTitle">终</label>
<input type="text" placeholder="请输入终点" id="endNode" />
</div>
<button id="travelBtn">开车去</button>
</div>
<div id="panel">
</div>
</div>
<script type="text/javascript">
var num = 0;
var map = new AMap.Map('container', {
zoom: 11,
center: [116.397428, 39.90923]
})
new AMap.Autocomplete({
input: startNode
})
new AMap.Autocomplete({
input: endNode
})
var traveMode = document.querySelectorAll('.travelMode a');
// console.log(traveMode)
// 交通工具切换
for(var i = 0; i < traveMode.length; i++){
// console.log(traveMode[i]);
traveMode[i].setAttribute('data-index', i);
traveMode[i].addEventListener('click', function(){
num = this.getAttribute('data-index');
for(var j = 0; j < traveMode.length; j++){
traveMode[j].className = '';
}
traveMode[num].className = 'active';
travelBtn.innerHTML = this.title;
})
}
travelBtn.onclick = function(){
map.clearMap(); // 清除路线
var inner = travelBtn.innerHTML; // 获取按钮的文本
// 判断起始位置输入框不能为空
if(startNode.value === '' || endNode.value === ''){
alert('起始位置不能为空');
panel.style.display = 'none';
return;
}else{
panel.style.display = 'block';
if(inner === '开车去'){
new AMap.Driving({
map: map, // 地图
panel: 'panel', // 搜索结果显示
city: '北京' // 城市
}).search([{keyword: startNode.value},{keyword: endNode.value}],function(status, data){
})
}else if(inner === '坐公交'){
new AMap.Transfer({
map: map,
panel: 'panel',
city : '北京'
}).search([{keyword: startNode.value},{keyword: endNode.value}],function(status, data){
})
}else{
new AMap.Riding({
map: map,
panel : 'panel',
city : '北京'
}).search([{keyword: startNode.value},{keyword: endNode.value}],function(status, data){
})
}
}
}
// 起始位置输入时隐藏展示搜索结果
startNode.oninput = function(){
panel.style.display = 'none';
}
endNode.oninput = function(){
panel.style.display = 'none';
}
</script>
</body>
</html>
1回答
-
同学你好，如果从开车切换到坐公交，开车展示的路线菜单不会删除，而是和公交路线一起显示
建议在点击按钮的时候清除面板中的内容，参考
祝学习愉快！
0
相似问题