写的很烂，希望老师给点建议

来源：8-11 自由编程

10hours

2020-03-09 11:25:20

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map</title>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=3372147f68beda6d56a8f680ffb5cf03&plugin=AMap.Driving,AMap.Riding,AMap.Transfer"></script> 
<style>
body {
margin: 0;
padding: 0;
text-decoration: none;
}
li {
list-style: none;
}
#container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.icon-wrap {
margin-left: 80px;
margin-top: 50px;
width: 300px;
height: 50px;
position:relative;
z-index: 3;
color:#fff;
text-align: center;
}
.icon {
height: 20px;
width: 20px;
display: inline-block;
margin-right: 60px;
cursor: pointer;
opacity: 0.2;
}
.icon:hover {
opacity: 0.6;
}
.icon-active {
opacity: 1;
}
#outerNode {
position: fixed;
top: 50px;
right: 20px;
width: 400px;
z-index: 999;
}
#startNode {
width: 300px;
height: 30px;
position:absolute;
padding-left: 20px;
top: 100px;
left: 50px;
z-index: 3;
background-color: #2b86f2;
border: none;
outline: none;
color: #fff;

}
#startNode:before {
content:"起";
width: 20px;
height: 20px;
display: inline-block;
position:absolute;
z-index: 5;
top: 20px;
left: 20px;
}
#endNode {
width: 300px;
height: 30px;
position:absolute;
padding-left: 20px;
top: 150px;
left: 50px;
z-index: 10;
background-color: #2b86f2;
border: none;
outline: none;
color: #fff;

}
.toBtn {
width: 80px;
height:30px;
position: absolute;
left: 300px;
top: 250px;
z-index: 10;
background-color: #2b80f0;
color: #fff;
border: none;
cursor: pointer;
}
.toBtn:hover {
opacity: 0.8;
}
.search {
width: 400px;
height: 300px;
padding-left: 30px;
position: absolute;
left: 20px;
top: 20px;
z-index: 2;
background-color: #3591ff;
}
input::-webkit-input-placeholder {
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<ul class="icon-wrap">
<li class="icon fa fa-car icon-active"></li>
<li class="icon fa fa-bus"></li>
<li class="icon fa fa-bicycle"></li>
</ul>
<div class="search">
<input type="text" id="startNode" placeholder="请输入起点">
<input type="text" id="endNode" placeholder="请输入终点">
</div>
<button id="toBtn" class="toBtn">开车去</button>
<!-- 路线信息 -->
<div id="outerNode">
</div>
</div>
<script>
//模仿jQuery方法获取元素
var $ = function(selector){
/*string to array*/
var a = selector.split("");
//className
if (a[0] == '.') {
return document.querySelector(selector);
//id
} else if(a[0] == '#'){
//slice删去数组中的第一个
var b = a.slice(1),
//讲数组转成字符串
selector = b.join('');
return document.getElementById(selector);
}
};
//创建地图
var map = new AMap.Map('container',{
zoom:17,
center: [116.39, 39.9]
});

var search = $('.search')

var toBtn = $('.toBtn');
var LineWrap = $('.icon-wrap');
var LineBtn = $('.icon');
var list = LineWrap.querySelectorAll('li');

//出行方式
var mode = [
{
form:'Driving',
value:'开车去'
},{
form:'Transfer',
value:'坐车去'
},{
form:'Riding',
value:'骑车去'
}]


//添加索引
for(var i = 0; i < list.length;i++){
list[i].index = i;
};

var curIndex = 0;
LineWrap.addEventListener('click', function (e) {
var index = e.target.index;
if (isNaN(index)) return;
if (index == curIndex) return;

list[curIndex].classList.remove('icon-active');
list[index].classList.add('icon-active');

toBtn.innerHTML = mode[index].value;

curIndex = index;
});



        //清除&添加placeholder
        search.addEventListener('click', function (e) {
         e.target.placeholder = '';
        });
        startNode.onblur = function () {
         this.placeholder = "请输入起点"
        };
        endNode.onblur = function () {
         this.placeholder = "请输入终点"
        };


       toBtn.addEventListener('click', function (e) {
         //清除地图覆盖物
         map.clearMap();

         outerNode.innerHTML = '';

         var form = mode[curIndex].form;
         new AMap[form]({
map:map,
panel:'outerNode'
}).search([
{keyword:startNode.value,city:'北京'},
{keyword:endNode.value,city:'北京'}
], function (status, data) {
console.log(data)
});

        }
)





</script>
</body>
</html>

有两个问题
1. 本想用:before 为搜索框添加个伪类，写出"起"字，虽有标签出现但是没有显示。
2.