请老师检查，优化一下
来源：8-11 自由编程
Golden几何
2021-07-11 16:34:04
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=60aa305cd4fe7c732d11656fea23a806&plugin=AMap.Driving,AMap.Transfer,AMap.Riding,AMap.Autocomplete"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
@font-face{
font-family: "iconfont"; /* Project id 2665930 */
src: url('font/iconfont.woff2?t=1625973915274') format('woff2'),
url('font/iconfont.woff?t=1625973915274') format('woff'),
url('font/iconfont.ttf?t=1625973915274') format('truetype');
}
.icon{
font-family: "iconfont" !important;
font-size: 24px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #91ddff;
}
.transition{
-o-transition:all 0.5s;
-ms-transition:all 0.5s;
-moz-transition:all 0.5s;
-webkit-transition:all 0.5s;
transition:all 0.5s;
}
#container{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
#search{
width: 312px;
height: 198px;
position: relative;
top: 0;
left: 9px;
background-color: #3591ff;
z-index: 9;
color: white;
cursor: auto;
}
#icons{
text-align: center;
padding-top: 4px;
}
#icons span{
margin:0 14px;
cursor: pointer;
}
#icons .showL{
color: white;
}
.Ipt{
width: 188px;
height: 26px;
position: absolute;
left: 50%;
margin-left: -94px;
background-color: #2d85f1;
margin-top: 9px;
}
.Ipt1{
top: 37px;
}
.Ipt2{
top: 78px;
}
.Ipt input{
position: absolute;
right: 0;
height: 100%;
width: 82%;
font-size: 14px;
background-color: #2d85f1;
border: none;
outline: none;
color: #91ddff;
}
.Ipt span{
position: absolute;
left: 0;
height: 100%;
width: 18%;
text-align: center;
margin-top: 2px;
color: #91ddff;
}
#btn{
width: 68px;
height: 33px;
position: absolute;
right: 62px;
bottom: 34px;
color: white;
color: #91ddff;
background-color: #479eff;
border: none;
cursor: pointer;
}
#btn:hover{
color: white;
box-shadow: 0 0 3px inset white;
}
#panel{
width: 312px;
background-color: white;
position: absolute;
z-index: 9;
left: 9px; /*上面的块是relative*/
}
</style>
</head>
<body>
<div id="container">
<div id="search">
<div id="icons">
<span class="icon transition showL" id="car"></span>
<span class="icon transition" id="bus"></span>
<span class="icon transition" id="bicycle"></span>
</div>
<div class="Ipt Ipt1">
<span>起</span><input id="startNode" type="text" placeholder="请输入起点">
</div>
<div class="Ipt Ipt2">
<span>终</span><input id="endNode" type="text" placeholder="请输入终点">
</div>
<button id="btn">开车去</button>
</div>
<div id="panel"></div>
</div>
<script type="text/javascript">
var map=new AMap.Map('container',{
zoom:11,
center:[116.379391,39.861536]
});
//默认
Line('Driving');
car.onclick=function(){
focusReset(this);
btn.innerHTML='开车去';
Line('Driving');
}
bus.onclick=function(){
focusReset(this);
btn.innerHTML='坐公交';
Line('Transfer');
}
bicycle.onclick=function(){
focusReset(this);
btn.innerHTML='骑车去';
Line('Riding');
}
function focusReset(idx){
var icons=document.getElementsByClassName('icon');
for(var i=0;i<icons.length;i++){
icons[i].classList.remove('showL');
}
idx.classList.add('showL');
}
function Line(type){
btn.onclick=function(){
map.clearMap();
new AMap[type]({
map:map,
panel:'panel',
city:'北京'
}).search([
{keyword:startNode.value,city:'北京'},{keyword:endNode.value,city:'北京'}
],function(){});
}
}
new AMap.Autocomplete({input:'startNode'});
new AMap.Autocomplete({input:'endNode'});
</script>
</body>
</html>
1回答
-
同学你好，代码正确，不需要优化了。代码本身写的很简洁而且很清晰，非常好了。
祝学习愉快！
0
相似问题