老师，为什么这种方法不起作用
来源：5-4 自由编程
青旗
2020-10-03 22:05:19
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>高德地图 2</title>
<script type="text/javascript"
src="https://webapi.amap.com/maps?v=1.4.15&key=db69e57e184d4aee4e996eda5760b613&plugin=AMap.Autocomplete,AMap.PlaceSearch">
</script>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#setzoom,
#setcenter {
width: 400px;
position: absolute;
z-index: 2;
top: 80px;
left: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 3px black;
background: #fff;
position: relative;
}
#node li {
cursor: pointer;
}
#searchNode #setcenter {
width: 280px;
height: 30px;
background: #fff;
position: absolute;
right: 20px;
top: 20px;
}
.amap-icon img {
width: 25px;
height: 35px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var map = new AMap.Map('container', {
zoom: 11,
center: [108.94802400000003, 34.263161],
});
map.setDefaultCursor = 'pointer'
var marker = new AMap.Marker({
icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", //标记的图标
position: map.center, //标记的坐标
offset: new AMap.Pixel(-20, -80) // 偏差值
});
var markNew = false;
map.add([marker]);
map.on('click', function (e) {
this.remove([marker])
var marker2 = new AMap.Marker({
icon: "http://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", //标记的图标
position: e.lnglat, //标记的坐标
offset: new AMap.Pixel(-20, -80) // 偏差值
});
if (markNew) {
map.remove([marker2]);
console.log('marker2')
} else {
map.remove([marker]);
console.log('marker')
};
map.add([marker2]);
markNew = true;
});
</script>
</body>
</html>
1回答
-
同学你好，这是由于代码程序书写不正确导致的，同学的代码在第一次点击的时候，会移除marker，同时添加marker2，从第二次点击开始，每次代码执行到最后都会重新添加marker2，而点击最开始没有清除marker2的操作。就导致呈现的效果是没有清除掉。分析如下：
因此，可以修改成：
这样，点击的时候，不仅可以移除点击事件外默认显示的marker标记，也可以在每次点击的时候移除点击事件里面的marker。
希望可以帮到你，祝学习愉快！
0
相似问题
回答 5
回答 4