写的很烂，希望老师给点建议
<!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.
红框所指的地方不知如何提前获取，这样直接写测试了一下好像也可以，并不妨碍搜索其他地区的路线，但是还是很好奇如何获取并传入？
如还有其他问题请老师一并指出，谢谢！
30
收起
正在回答
2回答
同学你好，是的，需要传入城市名，向老师之前那样写的，测试的是城市到城市之间的。虽然同一城市也可以执行，但是这个不是特别的精准。
当前我们还没有办法根据输入的内容，获取当前的城市，这里一般默认填写的都是写死的。
祝学习愉快~
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星