老师 关于路线 的问题
来源：8-11 自由编程
慕斯_Irice368
2019-08-14 22:05:38
当搜索的路线出现长度过长被遮挡部分如何解决，即使移动地图还是无法解决
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6dcf866f5dc3bb8504c35e7fcf434090&plugin=AMap.Driving,AMap.Transfer,AMap.Riding"></script>
<link type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.search-line{
width:300px;
height:220px;
background:#2583F7;
font:14px "微软雅黑";
position:absolute;
top:40px;
left:20px;
z-index:3;
}
.searIcon{
width:100%;
margin:15px 0;
text-align:center;
}
.fa{
color:white;
opacity:0.6;
}
.searIcon .fa-car{
opacity:1;
}
.fa+.fa{
margin-left:25px;
}
.searInput{
margin-left:55px;
overflow:hidden;
}
.searInput:last-of-type{
margin-top:15px;
}
input::-webkit-input-placeholder{
color:white;
}
input::-moz-placeholder{
color:white;
}
input:-moz-placeholder{
color:white;
}
input:-ms-input-placeholder{
color:white;
}
.text{
float:left;
width:30px;
height:30px;
line-height:30px;
color:white;
text-align:center;
background:rgba(46,32,234,0.6);
opacity:0.5;
}
#searchStar,#searchEnd{
float:left;
width:160px;
height:30px;
border:none;
outline:none;
background:rgba(46,32,234,0.6);
opacity:0.5;
color:white;
}
#searchBtn{
position:absolute;
right:55px;
bottom:40px;
width:60px;
height:30px;
border :none;
color:white;
background:rgba(255,255,255,0.3);
}
#searchContainer{
position:fixed;
top:260px;
left:20px;
z-index:3;
width:300px;
}
</style>
</head>
<body>
<div id="container"></div>
<div class="search-line">
<div class="searIcon">
<i class="fa fa-car" ></i>
<i class="fa fa-bus"></i>
<i class="fa fa-bicycle"></i>
</div>
<div class="searInput"><span class="text">起</span><input type="text" id="searchStar" placeholder="请输入起点" /></div>
<div class="searInput"><span class="text">终</span><input type="text" id="searchEnd" placeholder="请输入终点" /></div>
<input type="submit" id="searchBtn" value="开车去" />
</div>
<div id="searchContainer"></div>
<script type="text/javascript">
var map = new AMap.Map("container", {
zoom: 13,
center:[116.379,39.861]
});
var fa=document.querySelectorAll("i"),
faCar = document.querySelector(".fa-car"),
faBus = document.querySelector(".fa-bus"),
faBicycle = document.querySelector(".fa-bicycle"),
searchStar = document.querySelector("#searchStar"),
searchEnd = document.querySelector("#searchEnd"),
searchBtn = document.querySelector("#searchBtn"),
searchContainer = document.querySelector("#searchContainer");
var result1 = true,
result2 = true,
result3 = true;
function clearStyle() {
for (var i = 0; i < fa.length; i++) {
fa[i].style.opacity = "0.6";
}
};
faCar.onclick = function () {
clearStyle();
this.style.opacity = "1";
searchBtn.value = "开车去";
result1 = true;
};
faBus.onclick = function () {
clearStyle();
this.style.opacity = "1";
searchBtn.value = "坐公交";
result2 = true;
};
faBicycle.onclick = function () {
clearStyle();
this.style.opacity = "1";
searchBtn.value = "骑车去";
result3 = true;
};
searchBtn.onclick = function () {
if (searchBtn.value == "开车去" & result1 == true) {
map.clearMap();
searchContainer.innerHTML = "";
new AMap.Driving({
map: map,
panel: "searchContainer"
}).search([{ keyword: searchStar.value, city: "北京" }, { keyword: searchEnd.value, city: "北京" }], function (status, data) {
console.log(data);
}
)
};
if (searchBtn.value == "坐公交" & result2 == true) {
map.clearMap();
searchContainer.innerHTML = "";
new AMap.Transfer({
map: map,
panel: "searchContainer"
}).search([{ keyword: searchStar.value, city: "北京" }, { keyword: searchEnd.value, city: "北京" }], function (status, data) {
console.log(data);
}
)
};
if (searchBtn.value == "骑车去" & result3 == true) {
map.clearMap();
searchContainer.innerHTML = "";
new AMap.Riding({
map: map,
panel: "searchContainer"
}).search([{ keyword: searchStar.value, city: "北京" }, { keyword: searchEnd.value, city: "北京" }], function (status, data) {
console.log(data);
}
)
};
}
;
</script>
</body>
</html>
2回答
-
同学你好，代码路线规划没有问题。
可以将显示路线的容器设置固定高度，超出设置滚动条即可，例如：
自己可以测试下，祝学习愉快！
1 -
慕斯_Irice368
提问者
2019-08-15
谢谢老师 部分css的属性忘记了
0
相似问题