老师,请问怎么把之前的路线给清除掉?用了网上的clearMap ,destroy() 都不行。
来源:9-1 maptype
weixin_慕妹2333903
2019-12-10 20:20:38
3回答
同学你好,清除路线的话这里可以直接将面板的内容置空,参考:
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
weixin_慕妹2333903
提问者
2019-12-11
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>作业</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=614226227e3dc9cdc5b71838af1c6b35&plugin=AMap.ControlBar,AMap.Transfer,AMap.Autocomplete,AMap.ToolBar,AMap.Scale,AMap.Driving,AMap.Walking,AMap.TruckDriving,AMap.Riding"></script>
<style>
*{margin: 0;padding: 0;}
#container{width: 100%;height: 900px; position: relative;}
#panel{position: fixed;width: 230px;right: 100px;bottom: 100px;}
#wrap{top: 20px;left: 80px;border: 1px solid cornflowerblue;box-shadow: 0 0 16px cornflowerblue;width: 300px;height: 300px;
background: cornflowerblue;position: absolute;z-index: 3;}
ul{width: 300px;height: 50px;position: absolute;top: 20px;}
li{float: left; margin-left: 58px; list-style: none;line-height: 50px;}
.fa::before{cursor: pointer;font-size: 22px;}
.show{color: white;}
#startPlace{width: 200px;margin: 0 auto;position: absolute;top: 100px;left: 50px;height: 30px;}
#endPlace{width: 200px;margin: 0 auto;position: absolute;top: 160px;left: 50px;height: 30px;}
.btn{position: absolute;bottom: 40px;right: 60px;width: 100px;height: 30px;cursor: pointer;}
</style>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div id="container">
<div id="wrap">
<ul>
<li><i class="fa fa-car"></i></li>
<li><i class="fa fa-bus"></i></li>
<li><i class="fa fa-bicycle"></i></li>
</ul>
<input type="text" id="startPlace"><br>
<input type="text" id="endPlace"><br>
<button class="btn">开车去</button>
<button class="btn" style="display: none;">坐公交车去</button>
<button class="btn" style="display: none;">骑自行车去</button>
</div>
</div>
<div id="panel"></div>
<!-- <div id="controlNode">
<input type="text" name="" id="searchPlace" list="list"><br>
</div> -->
<script>
window.onload = function(){
var city;
var map= new AMap.Map('container',{
zoom:11,//初始的地图级别 表示放大倍数 放大镜
center:[108.948024,34.263161],
viewMode:'3D',//可以进行3D转换
// pitch:60,//角度倾斜
buildingAnimation:true
});
var lis=document.getElementsByClassName('fa');
var btns=document.getElementsByClassName('btn');
var startPlace=document.getElementById('startPlace');
var endPlace=document.getElementById('endPlace');
for(var i=0;i<lis.length;i++){(
function(id){
lis[id].onclick=function(){
for(var k=0;k<lis.length;k++){
if(id==k){
lis[k].classList.toggle('show');
}else{
lis[k].classList.remove('show');
}
}
for(var j=0;j<btns.length;j++){
if(id==j){
btns[j].style.display='';
}else{
btns[j].style.display='none';
}
}
}
}
)(i);}
map.getCity(function(info){
city=info.city;
});
map.addControl(new AMap.ControlBar({
showZoomBar:true,
position:{
top:'30px',
right:'30px'
}
}))
map.addControl(new AMap.ToolBar())
map.addControl(new AMap.Scale())
new AMap.Autocomplete({
input:'startPlace'
});
new AMap.Autocomplete({
input:'endPlace'
});
for(var m=0;m<btns.length;m++){
if(btns[m].innerHTML=="开车去"){
btns[m].onclick=function(){
// map.setCity(searchPlace.value);
new AMap.Driving({
map:map,
panel:'panel'
}).search([
{keyword:startPlace.value,city:city},
{keyword:endPlace.value,city:city}
],function(status,data){
console.log(status+""+data);
});
}
}else if(btns[m].innerHTML=="坐公交车去"){
console.log(btns[m])
btns[m].onclick=function(){
// map.setCity(searchPlace.value);
new AMap.Transfer({
map:map,
panel:'panel'
}).search([
{keyword:startPlace.value,city:city},
{keyword:endPlace.value,city:city}
],function(status,data){
console.log(status+""+data);
});
}
}else if(btns[m].innerHTML=="骑自行车去"){
console.log(btns[m])
btns[m].onclick=function(){
// map.setCity(searchPlace.value);
new AMap.Riding({
map:map,
panel:'panel'
}).search([
{keyword:startPlace.value,city:city},
{keyword:endPlace.value,city:city}
],function(status,data){
console.log(status+""+data);
});
}
}
}
// 自定义事件
var count=0;
//点击事件
var _onClick = function(){
//事件派发,也可以说是变量的改变
map.emit('count',{count:count += 1 });
};
//监听的变量发生改变时触发的函数
var _onCount = function(){
console.log(count);
};
//监听的变量发生改变时
map.on('count',_onCount);
AMap.event.addListener(map,'click',_onClick);
}
</script>
</body>
</html>
好帮手慕星星
2019-12-11
同学你好,可以试试使用clear()方法清除 。
如果自己解决不了,建议将写的代码粘贴上来,老师帮助你测试,便于准确定位问题所在。
祝学习愉快!
相似问题