老师 ，有个问题
来源：8-11 自由编程
木子小可爱
2019-10-10 18:04:14
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>map</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=a3327899d85e47c279c77b2eac04f0de&plugin=AMap.Driving,AMap.Transfer,AMap.Riding, AMap.Autocomplete"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
*{
margin:0;padding:0;
}
#container{
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
}
#box{
background:#fff;
width:300px;
height:auto;
position:fixed;
top:210px;
left:20px;
}
#search{
background: #3591ff;
position:absolute;
top:10px;
left:20px;
width:300px;
height:200px;
}
.icon{
height:30px;
line-height:30px;
margin-bottom:30px;
text-align:center;
}
.icon i{
color:#fff;
margin:0 15px;
opacity:.5;
cursor:pointer;
}
.icon .active{
opacity:1;
}
.start,.end{
background:200px;
height:25px;
margin: 0 50px 20px 50px;
background: #2e86f2;
text-indent:5px;
color:rgb(230,230,230);
}
input{
outline:none;
border:none;
background:#2d85f1;
color:#fff;
margin-left:5px;
}
#btn{
background:#4d9fff;
position:absolute;
right:50px;
color: rgb(245, 245, 245);
width:60px;
height:30px;
line-height:30px;
text-align:center;
}
</style>
<body>
<div id="container"></div>
<div id='box'></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'></div>
<div class='end'>终<input type='text' id='endnode'></div>
<div id='btn'>开车去</div>
<!-- <div class=btn> <input type='text' id='searchIpt' value='开车去'></div>-->
</div>
<script type='text/javascript'>
var box=document.getElementById('box'),
icon=document.getElementsByClassName('fa'),
startnode=document.getElementById('startnode'),
endnode=document.getElementById('endnode'),
btn=document.getElementById('btn'),
btntext=['开车去','坐公交','骑车去'],
index=0;
var map=new AMap.Map('container',{
zoom:10,
center:[116.379391,39.861536],
});
for(var i=0;i<icon.length;i++){
icon[i].setAttribute("data-id",i)
icon[i].onclick=function(){
index=this.getAttribute('data-id');
for(var j=0;j<icon.length;j++){
icon[j].style.opacity=0.5;
btn.innerHTML="";
}
this.style.opacity=1;
btn.innerHTML=btntext[index];
}
}
btn.onclick=function(){
if(startnode.value==''&endnode.value==''){
return;
}
box.innerHTML='';
//老师 为什么下面不可以用else if(btn.innerHTML=='开车去')
if(btn.innerHTML=='开车去'){
new AMap.Driving({
map:map,
panel:'box',
}).search([
{keyword:startnode.value,city:'北京' },
{keyword:endnode.value,city:'北京'}
],function(state,data){});
map.clearMap();
}
else if(btn.innerHTML=="坐公交"){
new AMap.Transfer({
map:map,
panel:'box',
}).search(
[{keyword:startnode.value,city:'北京' },
{keyword:endnode.value,city:'北京'}]
,function(state,data){})
map.clearMap();
}
else if(btn.innerHTML=='骑车去'){
new AMap.Riding({
map:map,
panel:'box',
}).search(
[{keyword:startnode.value,city:'北京' },
{keyword:endnode.value,city:'北京'}]
,function(state,data){})
map.clearMap();
}
else{
return;
}
}
//console.log(map.setDEfaultCursor)
/*
map.setDefaultCursor('webapi');
var marker=new AMap.Marker({
icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
position:[116.379391,39.861536]
});
marker.setMap(map);
map.on('click',function(e){
//map.setMarker(null);
map.remove([marker]);
marker=new AMap.Marker({
icon:'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
position:[e.lnglat.lng,e.lnglat.lat]
})
map.add([marker]);})*/
</script>
</body>
1回答
-
好帮手慕星星
2019-10-10
同学你好，
老师这边使用Chrome浏览器测试你的代码没有问题哦，else if这样写是可以的，
建议再测试下，祝学习愉快！
0
相似问题