遇到问题麻烦老师给予解答
来源：8-11 自由编程
yz_monkey
2020-07-04 16:51:39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>高德DIY改进</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=dcee67f573cdde2da470cffd5a66b429&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Driving,AMap.Driving,AMap.Transfer,AMap.Riding,AMap.Scale,AMap.ToolBar,AMap.ControlBar,AMap.MapType"></script>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#container{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.search-box{
position: absolute;
left: 15px;
top: 20px;
width: 320px;
height: 200px;
color: #fff;
background: #4284D3;
text-align: center;
border-radius: 5px;
}
.searchIcon{
width: 240px;
height: 30px;
margin: 10px auto;
color:#fff;
}
.searchIcon .fa{
margin: 0 20px;
line-height: 30px;
cursor: pointer;
}
.searchCon{
width: 240px;
margin: 0 auto;
position: relative;
}
.searchCon input{
width: 240px;
height: 30px;
margin-bottom: 20px;
font-size: 14px;
background: #0E53A7;
outline: none;
border: none;
border-radius: 3px;
text-indent: 25px;
color: #eee;
}
::-webkit-input-placeholder{
color: #ddd;
font-size: 12px;
text-indent: 25px;
}
.searchCon button{
width: 80px;
height: 30px;
font-size: 12px;
background: #6899D3;
outline: none;
border: none;
border-radius: 3px;
color: #fff;
float: right;
box-shadow: 0 0 4px rgba( 0,0,0,.5);
cursor: pointer;
}
.searchCon span:nth-child(1){
color: #eee;
position: absolute;
top: 4px;
left: 5px;
}
.searchCon span:nth-child(3){
position: absolute;
color: #eee;
top: 54px;
left: 5px;
}
.searchCon button:hover{
/*box-shadow: 0 0 4px rgba( 255,255,255,.5);*/
background: #6899ee;
transition: all 0.5s;
}
#panel{
position: absolute;
top: 220px;
left: 15px;
background: #fff;
width: 320px;
/*height: 100px;*/
}
</style>
</head>
<body>
<div id="container">
</div>
<div class="search-box">
<div class="searchIcon">
<i class="fa fa-car" id="searchCar"></i>
<i class="fa fa-bus" id="searchBus"></i>
<i class="fa fa-bicycle" id="searchBicycle"></i>
</div>
<div class="searchCon">
<span>起 </span><input type="text" id="searchStar" placeholder="请输入起点">
<span>终 </span><input type="text" id="searchEnd" placeholder="请输入终点">
<button id="searchBtn">开车去</button>
</div>
</div>
<div id="panel"></div>
<script>
//获取元素
var sCar = document.getElementById('searchCar'),
sBus = document.getElementById('searchBus'),
sBicycle = document.getElementById('searchBicycle'),
iconArr = document.getElementsByClassName('fa'),
sStar = document.getElementById('searchStar'),
sEnd = document.getElementById('searchEnd'),
sBtn = document.getElementById('searchBtn'),
sArr = ['开车去','坐公交','骑车去'];
sCar.style.opacity = 1;
// 加载地图
var map = new AMap.Map('container',{zoom:11,});
//添加输入提示并将结果显示在搜索结果列表中
var StarNode = new AMap.Autocomplete({
input:'searchStar',
});
var EndNode = new AMap.Autocomplete({
input:'searchEnd',
});
var PlaceSearch = new AMap.PlaceSearch({
map:map,
city:'',
pageSize:5,
pageIndex:1,
panel:"panel",
});
AMap.event.addListener(StarNode,'select',function(e){
// 清楚地图覆盖物
map.clearMap();
map.setCenter(e.poi.location);
map.setZoom(12);
PlaceSearch.search(e.poi.name);
});
AMap.event.addListener(EndNode,'select',function(e){
// 清楚地图覆盖物
map.clearMap();
map.setCenter(e.poi.location);
map.setZoom(12);
PlaceSearch.search(e.poi.name);
});
function iconReset(){
for (var i = 0; i < iconArr.length; i++) {
iconArr[i].style.opacity = 0.5;
}
}
for(var j = 0; j < iconArr.length; j++){
var icon = iconArr[j];
icon.onclick = function(){
iconReset();
icon.style.opacity = 1;
sBtn.innerHTML = sArr[j];
if(sStar.value!=''&sEnd.value!=''){
Go();
}
};
icon.onmouseover = function(){
// console.log(this)
if(icon.style.opacity!=1){
icon.style.opciyt = 0.75;
}
};
icon.onmouseout = function(){
console.log(icon.style.opacity)
if(icon.style.opacity == 0.75){
icon.style.opacity = 0.5;
}
};
}
searchBtn.onclick = function(){
Go();
}
// 开车路线系统
function byCar(){
new AMap.Driving({
map:map,
panel:'panel',
}).search([
{keyword:searchStar.value},
{keyword:searchEnd.value}
],function(status,data){});
}
// 公交路线系统
function byBus(){
var city = data.city;
if(data.city == ''){
city = data.province;
}
new AMap.Transfer({
map:map,
panel:'panel',
}).search([
{keyword:searchStar.value},
{keyword:searchEnd.value}
],function(status,data){});
}
// 骑行系统路线
function byBicycle(){
new AMap.Riding({
map:map,
panel:'panel',
}).search([
{keyword:searchStar.value},
{keyword:searchEnd.value}
],function(status,data){});
}
// 搜索
function Go(){
map.clearMap();
sBtn.innerHTML = '';
sBtn.style.display = 'none';
if(sBtn.innerHTML = '开车去'){
byCar();
}else if (sBtn.innerHTML = '坐公交') {
byBus();
}else if (sBtn.innerHTML = '骑车去') {
byBicycle();
}
setTimeout(function(){
sBtn.style.display = 'block';
},1000);
}
</script>
</body>
</html>
点击图标后显示错误 同时无法使用搜索开车、坐公交和骑行选项
1回答
-
好帮手慕星星
2020-07-04
同学你好，代码中有些效果没有必要设置，例如：
1、按钮的过渡效果
2、输入文字之后补全搜索列表，点击列表项的时候出现相关内容，这是不需要的。面板中只显示路径就好
参考修改：实现了主要逻辑功能
<script> //获取元素 var sCar = document.getElementById('searchCar'), sBus = document.getElementById('searchBus'), sBicycle = document.getElementById('searchBicycle'), iconArr = document.getElementsByClassName('fa'), sStar = document.getElementById('searchStar'), sEnd = document.getElementById('searchEnd'), sBtn = document.getElementById('searchBtn'), sArr = ['开车去', '坐公交', '骑车去']; // sCar.style.opacity = 1; // 加载地图 var map = new AMap.Map('container', { zoom: 11, }); //添加输入提示并将结果显示在搜索结果列表中 var StarNode = new AMap.Autocomplete({ input: 'searchStar', }); var EndNode = new AMap.Autocomplete({ input: 'searchEnd', }); var PlaceSearch = new AMap.PlaceSearch({ map: map, city: '', pageSize: 5, pageIndex: 1, panel: "panel", }); // 封装函数，点击图标的时候切换文字 function changeText(j) { var icon = iconArr[j]; icon.onclick = function() { sBtn.innerHTML = sArr[j]; if (sStar.value != '' & sEnd.value != '') { Go(); } }; } for (var j = 0; j < iconArr.length; j++) { // 调用函数，传入索引 changeText(j); } searchBtn.onclick = function() { Go(); } // 开车路线系统 function byCar() { new AMap.Driving({ map: map, panel: 'panel', }).search([{ keyword: searchStar.value }, { keyword: searchEnd.value } ], function(status, data) {}); } // 公交路线系统 function byBus() { new AMap.Transfer({ map: map, panel: 'panel', // 公交必须添加城市 city: '北京' }).search([{ keyword: searchStar.value }, { keyword: searchEnd.value } ], function(status, data) {}); } // 骑行系统路线 function byBicycle() { new AMap.Riding({ map: map, panel: 'panel', }).search([{ keyword: searchStar.value }, { keyword: searchEnd.value } ], function(status, data) {}); } // 搜索 function Go() { // 清除面板中的内容 panel.innerHTML = ''; // 一个等号是赋值，两个或者三个等号为判断 // if (sBtn.innerHTML = '开车去') { if (sBtn.innerHTML == '开车去') { byCar(); // } else if (sBtn.innerHTML = '坐公交') { } else if (sBtn.innerHTML == '坐公交') { byBus(); // } else if (sBtn.innerHTML = '骑车去') { } else if (sBtn.innerHTML == '骑车去') { byBicycle(); } } </script>自己测试下，祝学习愉快！
0
相似问题