The renderings make a small toolbar respectively driving, bus riding, and three types of route switching button. Place the input box, including start and end points, the bottom should have a button to search for the route planning.
Ideas:
1. Create a map using the new AMap.Map.
2. Introduction of route planning plug driving, bus riding, and the <script> tag, the insert follows
AMap.Driving, AMap.Transfer, AMap.Riding
3. Click the Search button binding event to clear the map of all coverings when clicked. Determine the search button text. If it is "driving out", it is the use of AMap.Driving () method planning driving routes, and displayed on the map.
4. Search button text to determine if it is "bus," on the use of AMap.Transfer () method of planning bus routes, and displayed on the map.
5. If the search button is the text "ride out" using AMap.Riding () method of planning cycle route, and displayed on the map.
6. When you click the icon button, the button turns white, the other two can set a transparency effect
Task Tips:
1. Clear map covering methods: map.clearMap ();
2. Route Type button can be used to achieve font-awesome, font-awesome address as follows:
https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Icon style to use:
驾车 ：<i class="fa fa-car"></i>
公交 ：<i class="fa fa-bus"></i>
骑行 ：<i class="fa fa-bicycle"></i>
<!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"."Please enter your starting point"= 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>