老师 您好 帮我看看还可以怎么优化代码吧
来源：8-11 自由编程
小虾虾小
2019-10-31 16:32:44
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自由编程8-11</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=cae1f6c32cb63e91eaf620502db545a4&plugin=AMap.Autocomplete,AMap.Driving,AMap.Transfer,AMap.Riding"></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;
}
#search{
width: 300px;
height: 170px;
position: relative;
top: 10px;
left: 10px;
padding: 20px;
background: #3d93fd;
border-radius: 3px;
}
#search .icon{
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}
#search .fa{
float: left;
opacity: 0.5;
color: #fff;
margin: 0 20px 0 25px;
cursor: pointer;
}
#search .fa:nth-child(1){
opacity: 1;
}
#search .startBox,#search .endBox{
position: absolute;
top: 50px;
width: 260px;
height: 34px;
line-height: 34px;
left: 50%;
margin-left: -130px;
font-size: 14px;
color: #acd7ff;
background-color: #3587eb;
border-radius: 2px;
margin-bottom: 10px;
}
#search .startBox .startWord,
#search .endBox .endWord{
display: inline-block;
width: 34px;
height: 100%;
text-align: center;
float: left;
}
#search .startBox #startNode,
#search .endBox #endNode{
width: 226px;
height: 100%;
background: none;
border: none;
text-indent: 5px;
float: left;
color: #acd7ff;
}
#search .startBox #startNode::-webkit-input-placeholder,
#search .endBox #endNode::-webkit-input-placeholder{
color: #acd7ff;
}
#search .endBox{
top: 90px;
}
#search #btn{
padding: 0 25px;
height: 32px;
line-height: 32px;
background-color: #559ffb;
border: none;
border-radius: 2px;
color: #fff;
font-size: 14px;
text-align: center;
position: absolute;
right: 40px;
bottom: 40px;
cursor: pointer;
}
#searchResult{
width: 340px;
position:fixed;
top: 220px;
left: 10px;
background: #fff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="search">
<div class="icon">
<i class="fa fa-car"></i>
<i class="fa fa-bus"></i>
<i class="fa fa-bicycle"></i>
</div>
<div class="startBox"><span class="startWord">起</span><input type="text" id="startNode" placeholder="请输入起点"></div>
<div class="endBox"><span class="endWord">终</span><input type="text" id="endNode" placeholder="请输入终点"></div>
<button id="btn">开车去</button>
</div>
<div id="searchResult"></div>
<script type="text/javascript">
var map = new AMap.Map('container',{
zoom:10, //初始化地图的级别
center:[116.379391,39.861536] //初始化地图的中心点
});
new AMap.Autocomplete({
input : 'startNode'
});
new AMap.Autocomplete({
input : 'endNode'
});
var fas = document.getElementsByClassName('fa');
for (var i = 0; i < fas.length; i++) {
fas[i].index = i;
fas[i].onclick = function(){
for (var j = 0; j < fas.length; j++) {
fas[j].style.opacity = .5;
}
this.style.opacity = 1;
if (this.index == 0) {
btn.innerHTML = '开车去';
}else if (this.index == 1) {
btn.innerHTML = '坐公交';
}else{
btn.innerHTML = '骑车去';
}
};
}
var cle;
btn.onclick = function(){
if (cle) {
cle.clear();
}
if (this.innerHTML == '开车去') {
cle = new AMap.Driving({
map : map,
panel : 'searchResult'
});
cle.search([
{keyword : startNode.value,city : '北京'},
{keyword : endNode.value,city : '北京'}
],function(status,data){
console.log(data);
});
}else if (this.innerHTML == '坐公交') {
cle = new AMap.Transfer({
map : map,
panel : 'searchResult'
});
cle.search([
{keyword : startNode.value,city : '北京'},
{keyword : endNode.value,city : '北京'}
],function(status,data){
console.log(data);
});
}else {
cle = new AMap.Riding({
map : map,
panel : 'searchResult'
});
cle.search([
{keyword : startNode.value,city : '北京'},
{keyword : endNode.value,city : '北京'}
],function(status,data){
console.log(data);
});
}
};
</script>
</body>
</html>
1回答
-
同学你好，可以参考如下方式优化代码
将设置规划路线以及搜索结果提取出来，单独分装成函数
在按钮点击事件中调用函数即可
点击图标的时候， 可以把之前的线路覆盖物和路线规范信息清空，并展示当前图标对应的路线图
同学可以自己下去再测试一下哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~
0
相似问题