请老师帮忙看看，哪儿还可以优化的？
来源：8-11 自由编程
幻城163630
2020-05-29 22:11:27
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a1a0f7b6a04b9992058657a70431214e&plugin=AMap.Driving,AMap.Transfer,AMap.Riding,AMap.Autocomplete"></script>
<style>
*{
padding:0;
margin: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{
width:200px;
height:150px;
position:absolute;
top:10px;
left:10px;
background:rgba(0, 0, 255, 0.801);
padding:0 20px;
}
.Names{
width:100%;
height:auto;
color:white;
background:rgba(3, 3, 114, 0.801);
}
input{
background:rgba(3, 3, 114, 0.801);
border:none;
outline:none;
color:white;
}
.img{
padding:10px 0;
}
.fa{
padding:0 22px;
cursor:pointer;
}
#btn{
position:absolute;
bottom:30px;
right:20px;
border:none;
background:rgba(12, 12, 185, 0.801);
color:white;
padding:5px;
}
.fa-active{
color:white;
}
</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'>
<div class='img'>
<i class="fa fa-car fa-active"></i>
<i class="fa fa-bus"></i>
<i class="fa fa-bicycle"></i>
</div>
<div class='Names'>起点:<input type="text" id='startNode' placeholder='请输入起点'></div>
<div class='Names'>终点:<input type="text" id='endNode' placeholder='请输入终点'></div>
<button id='btn'>开车去</button><br/>
</div>
<script>
var fas=document.querySelectorAll('.fa');//图标
//地图的初始化
var map=new AMap.Map('container',{
zoom:17,//初始的地图级别
center:[116.379391,39.861536],//初始化地图的中心点
});
// 获取元素的样式
var getClass = function ( element ) {
return element.getAttribute('class');
}
// 设置元素的样式
var setClass = function ( element,cls) {
return element.setAttribute('class',cls);
}
// 为元素添加样式
var addClass = function( element , cls ){
var baseCls = getClass(element);
if( baseCls.indexOf(cls) === -1){
setClass(element,baseCls+' '+cls); // 注意空格
}
return ;
}
var delCls = function( element , cls){
var baseCls = getClass(element);
if( baseCls.indexOf(cls) > -1){
setClass( element,baseCls.split(cls).join(' ').replace(/\s+/g,' ') );
}
return ;
}
//点击图标高亮
function Right(index){
for(var i=0;i<fas.length;i++){
delCls(fas[i],'fa-active');
}
addClass(fas[index],'fa-active');
}
str=['开车去','坐公交','骑车去'];
fas[0].onclick=function(e){
Right(0);
btn.innerHTML=str[0];
ready();
}
fas[1].onclick=function(e){
Right(1);
btn.innerHTML=str[1];
ready();
}
fas[2].onclick=function(e){
Right(2);
btn.innerHTML=str[2];
ready();
}
//输入内容自动提示
var search1=new AMap.Autocomplete({//添加搜索内容
input:'startNode',
});
var search3=new AMap.Autocomplete({//添加搜索内容
input:'endNode',
});
//绑定事件开始导航
function search(name){
btn.onclick=function(){
map.clearMap();//清除地图覆盖物
panel.innerHTML=''//清空路线内容
new name({
map:map,
panel:'panel',
city:'北京',
}).search([
{keyword:startNode.value},
{keyword:endNode.value},//只有起点和终点
],function(status,data){
console.log(data);
})
}
}
function ready(){
if(btn.innerHTML=='开车去'){
search(AMap.Driving);
console.log(0);
}else if(btn.innerHTML=='坐公交'){
search(AMap.Transfer);
console.log(1);
}else if(btn.innerHTML=='骑车去'){
search(AMap.Riding);
console.log(2);
}else{}
}
</script>
</body>
</html>
1回答
-
同学你好，功能是没有问题的，样式可以再优化一下：按钮的位置可以再往下调整些
例如：把父级的高度设置大些
祝学习愉快~
0
相似问题