虽然思路清晰，但代码有冗余，请问该如何精简
来源：8-11 自由编程
qq_慕九州2374973
2020-02-19 13:17:41
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>map3</title>
<!-- 方式一 -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=005eae90b02a9d31de4ea9e5a123cb62&plugin=AMap.Transfer,AMap.Driving,AMap.Riding,AMap.Autocomplete"></script>
<style>
*{margin: 0;padding: 0;list-style: none;}
#container {width:100%; height: 100%;position: absolute;left: 0;top: 0;}
#panel{position: fixed;background: white;top: 10px;right: 10px;width: 280px;}
.search{position: absolute;top: 10px;left: 50px;width: 200px;height: 150px;background: rgba(0,0,0,.2);text-align: center;}
.searchInput{line-height: 36px;height: 24px;width:150px;margin-top: 5px;}
.searchBtn{width: 60px;height: 24px;margin-top: 10px;color: #f01414;background: #f3f5f7;border: none;}
.searchBtn:hover{color: white;background: #f01414;}
.outOfWay{width: 100%;height: 36px;}
.car,.bus,.bicycle{display: inline-block;width: 50px;height: 100%;margin-top: 10px;color:blue;}
.car:hover,.checked{color:white;cursor: pointer;}
.bus:hover{color:white;cursor: pointer;}
.bicycle:hover{color:white;cursor: pointer;}
</style>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="container"></div>
<div id="panel"></div>
<div id="search" class="search">
<p class="outOfWay"><i class="fa fa-car car checked "></i><i class="fa fa-bus bus"></i><i class="fa fa-bicycle bicycle"></i></p>
起点<input type="text" name="" id="fromInput" class="searchInput">
终点<input type="text" name="" id="toInput" class="searchInput" >
<button class="searchBtn" id="searchBtn">开车去</button>
</div>
<!--方式一-->
<script type="text/javascript">
var map = new AMap.Map("container",{
zoom:17,//初始化地图显示级别
// pitch:90,
center:[106.5507300000,29.5647100000], //初始化地图的中心点
// viewMode:"3D", //默认2D
// buildingAnimation:true //可以让显示的建筑物变成动画显示
});
//获取元素
var btn = document.querySelector("#searchBtn"),
fromInput = document.querySelector("#fromInput"),
toInput = document.querySelector("#toInput");
var fa = document.getElementsByClassName("fa");
new AMap.Autocomplete({
input:"fromInput"
});
new AMap.Autocomplete({
input:"toInput"
});
for(var i = 0;i < fa.length;i++){
fa[i].setAttribute("data-id",i);
fa[i].onclick = function () {
//添加样式
for(var j = 0 ; j < fa.length; j++){
fa[j].classList.remove("checked");
}
this.classList.add("checked");
var index = this.getAttribute("data-id");
console.log(index);
if(Number(index) === 0){
btn.innerHTML = "开车去";
}else if(Number(index) === 1){
btn.innerHTML = "坐公交" ;
}else{
btn.innerHTML = "骑车去";
}
};
}
//为按钮绑定点击事件
btn.onclick = function () {
//清空地图覆盖
map.clearMap();
if(btn.innerHTML === "开车去"){
//鼠标点击导航
new AMap.Driving({
map:map,
panel:"panel",
}).search([{keyword:fromInput.value,city:"重庆"},{keyword:toInput.value,city:"重庆"}],function (status,data) {
console.log(data);
});
}else if(btn.innerHTML === "坐公交"){
new AMap.Transfer({
map : map,
panel : "panel",
}).search([{keyword : fromInput.value, city : "重庆" }, {keyword : toInput.value, city : "重庆"}], function(status, data) {
console.log(data)
});
}else if(btn.innerHTML === "骑车去"){
new AMap.Riding({
map:map,
panel : "panel"
}).search([{keyword : fromInput.value, city : "重庆" }, {keyword : toInput.value, city : "重庆"}], function(status, data) {
console.log(data);
});
}
};
</script>
</body>
</html>
1回答
-
同学你好，代码实现的很好了，不需要优化了。另外，有一个小问题如下：
当搜索其他线路时，前一个搜索出的线路并没有清除
如下设置：
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题