高德地图AMap.MouseTool插件多次测距不能清除bug

AMap.MouseTool插件是一个很有用的插件,可以在地图上画折线测量距离,也可以在地图上画区域测量面积,这些在客户的一些高级需求里经常出现,最近使用出现了bug,此bug在官网的示例里也能重现

官网demo上重现步骤如下图, 

1.点击左侧菜单,打开插件示例;

2.点击测量距离radio;3.在地图上点击测量出一个折线距离

4.切换到面积测量radio;5.在地图上点击,选中一片区域

6.切换回测量距离;7.在地图上再点击测量出一个折线距离

8.点击下面的关闭按钮,此时会调用插件的清除方法,但是地图上第一次画的折线没有删除

鼠标工具-距离面积测量-工具类-示例中心-JS API 示例 | 高德地图API

----------------------------------------------

解决思路:

1.F12探针查看元素,发现是多了overlay和几个marker,然后就想把多出来的overlay和marker存入缓存然后hide(),结果定位的marker莫名其妙取不出来,只隐藏了marker对应的content文字部分

2.发现测量距离的最后一个点上的content内容后面有个叉号,点击叉号就可以关闭,叉号图标有个特别的class="delimg",只要主动触发就可以关闭了,于是开始操作:

var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
const notDeleteLineCount = document.getElementsByClassName("delimg").length;
for (var i = 0; i < notDeleteLineCount; i++) {
   document.getElementsByClassName("delimg")[0]?.dispatchEvent(e);
   }

完美解决

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值