根據效果圖做一個小工具欄 , 分別有駕車 ,公交和騎行三個路線類型的切換按鈕 。地點輸入框包括起點和終點 ,最下面要有一個可以搜索線路規划的按鈕 。
思路：
1.使用new AMap.Map創建一個地圖。
2.在<script>標簽中引入駕車 ,公交和騎行的線路規划插件 ,插件如下
AMap.Driving,AMap.Transfer,AMap.Riding
3.為搜索按鈕綁定點擊事件 ,點擊時先清除地圖所有覆蓋物 .判斷搜索按鈕文字。如果是“開車去”，那么就是使用AMap.Driving()方法規划駕車路線 ,並顯示在地圖上。
4.判斷搜索按鈕文字如果是”坐公交 ”,就使用AMap.Transfer()方法規划公交路線 ,並顯示在地圖上。
5.搜索文字按鈕如果是“騎車去” ,使用AMap.Riding()方法規划騎行路線 ,並顯示在地圖上。
6.在點擊圖標按鈕時 ， 當前按鈕變為白色 ，其他兩個可以設置一個透明度效果
任務提示：
1.清除地圖覆蓋物的方法 ： map.clearMap();
2.路線類型按鈕可以使用font-awesome實現 ，如下為font-awesome地址：
https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
使用的圖標樣式：
駕車 ：<i class="fa fa-car"></i>
公交 ：<i class="fa fa-bus"></i>
騎行 ：<i class="fa fa-bicycle"></i>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>8-11自由編程（2）</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Transfer,AMap.Autocomplete,AMap.Driving,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>
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);
})
}else 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);
})
}else{
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>