背景介绍:
地图上有两类点(采样点与合作社点)点击按钮切换展示不同的点如下图展示内容
之前我写的切换是给两类不同的点绑定上不同的 class名称 给他们做显示隐藏(比较lou的方法大家不要学习)这样做的后果会导致一个问题就是地图上的自己定义的内容是隐藏起来了看不到了 但是点击地图 还是存在这个marker点的 再加上macker有点击事件绑定更加明显
所以认真的看了官网找到了解决办法
在我们渲染marker点是增加extData属性 给一个任意的值
marker = new AMap.Marker({
map: map,
position: [+lngs[0], +lngs[1]], //基点位置
topWhenMouseOver: true,//鼠标移进时marker是否置顶,默认false,不置顶(自v1.3 新增)
draggable: false, //是否可拖动
extData: "hzsMark",
content: "<ul class='markerIcon makerT makerY'><li>" + data.name + "</li></ul>",
});
然后 获取所有的marker点 并在这些点中寻找extData属性值为hzsMark的marker点 然后进行删除
clearMarker('marker','hzsMark')
function clearMarker(typename,extData) {
var lays = map.getAllOverlays(typename); //获取田地地图中所有地块 数组
if (lays.length > 0) {
for (var i = 0; i < lays.length; i++) { //遍历数组
var exid = lays[i].getExtData();
if (exid == extData) {//寻找相同名称的
map.remove(lays[i]);
}
}
}
}
然后在切换时 就可以删除当前页面不需要展示的marker点 然后再渲染需要展示的点
大佬们有更好的方法可以告诉我呀一起学习