老师好，为什么清除无效
来源：5-4 自由编程
慕雪9296518
2020-06-06 17:52:35
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=43f8ecb2e320ff1df9a97c1087da25c8&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
<style type ="text/css">
*{margin: 0;padding: 0;}
#mzac{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
#setCenterNode{position: absolute;z-index: 2;background-color: white;text-align: center;
width: 400px;height: auto;box-shadow: 0 0 15px black;min-height: 400px;}
.currentposit{position: absolute;right: 0;bottom: 0;}
#setCenterNode div{margin: 10px auto;}
span{height: 20px;width:60px;font-weight: bold;
color: black;display: inline-block;margin-left: 10px;}
.btn3{background-color: gray;color: white;height: 20px;width:120px;}
.currentposit span{background-color: white;color: black;}
.setcenter{width: 300px;height: auto;position: absolute;z-index: 2;right: 0px;top: 0;
background-color: white;box-shadow: 0px 0px 8px black;}
.setcenter input{width: 300px;}
</style>
</head>
<body>
<div id="mzac">
<div id="setCenterNode">
<div>工具栏</div>
<div>搜索城市:<input type="text" name="" id="citynode"><span class="btn1">确定</span></div>
<div>设置显示级别:<input type="text" name="" id="zoomnode"><span class="btn2">确定</span></div>
<div>到具体位置:<input type="text" name="" id="dirationnode"><span class="btn4">确定</span></div>
<div class="btn3">解除范围限制</div>
<div class="currentposit">当前所在省/直辖市:<span class="city">北京市</span></div>
</div>
<div class="setcenter" >
<div><input type="text"></div>
<div id="info"></div>
</div>
</div>
<script text="text/javascript">
var citynode = document.getElementById("citynode");
var zoomnode = document.getElementById("zoomnode");
var btn1 = document.querySelector(".btn1");
var btn2 = document.querySelector(".btn2");
var btn3 = document.querySelector(".btn3");
var btn4 = document.querySelector(".btn4");
var city = document.querySelector(".city");
var info = document.getElementById("info");
var map = new AMap.Map("mzac",{
zoom:9,
center:[120,30]
});
map.setDefaultCursor('pointer');
var mybounds = new AMap.Bounds([116.567542,39.997639],[116.22422,39.813285]);
map.setBounds(mybounds);
btn1.onclick = function(){
map.setCity(citynode.value);
city.innerHTML = citynode.value;
}
btn2.onclick = function(){
map.setZoom(zoomnode.value);
}
btn3.onclick = function(){
var bounce = map.getBounds();
if(btn3.innerHTML == "解除范围限制"){
map.clearLimitBounds(bounce);
btn3.innerHTML = "锁定范围限制";
}else{
map.setLimitBounds(bounce);
btn3.innerHTML = "解除范围限制";
}
}
map.on("click",function(e){
map.setCenter([e.lnglat.lng,e.lnglat.lat])
})
map.on("moveend",function(){
map.getCity(function(info){
city.innerHTML = info.province;
console.log(info.province);
})
})
map.on("click",function(e){
map.remove(marker);
var marker = new AMap.Marker({
icon:"https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
position:[e.lnglat.lng,e.lnglat.lat]
})
marker.setMap(map);
})
var searchNode = new AMap.Autocomplete({
input:'dirationnode'
});
var PlaceSearch = new AMap.PlaceSearch({
map:map,
pageSize:5,
panel:info
})
AMap.event.addListener(searchNode,'select',function(e){
PlaceSearch.search(e.poi.name);
});
</script>
</body>
</html>
1回答
-
好帮手慕慕子
2020-06-06
同学你好，是指在点击的地方添加一个标记 ，同时要把之前的标记清除了吗？
如果是这样的话，那么是因为使用remove方法时，传入的marker变量是在声明前使用的，不符合语法规范，另一点是在点击事件中，使用var声明变量，导致每次点击时，都会声明一个新的变量，所以是无法获取清除之前的标记。
建议：将marker声明为全局变量，在清除之前，添加判断，有值的时候，再清除
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题