测距工具部分情况下无效的问题解决 - 高德JSAPI

最近项目中新增了一个需求是在地图上新增一个测距工具，方便看一下距离

高德官方本身自带了有一个测距工具类的 RangingTool ，以插件的方式引入即可

---

 

问题一：

如果地图上有覆盖物的话（我这是 polygon），开启测距后，第一次点击到覆盖物上无法定位开始测距点，但是后面几次却可以。

 

原因：

后来想了以下，应该是事件没有冒泡到地图上，可能在 polygon 时候就被捕获截停了。

 

解决办法：

在初始化 polygon 的时候，配置 bubble: true ，允许其事件冒泡到地图上，就没有问题了。

 

（但是还有一点疑点就是为什么第一次点会被截获，后面再去点就没问题，这点并没有找到原因）

 

---

 

问题二：

有时候点 x 关闭或者 垃圾桶 删除测距线的时候失效了，完全点不动了，排查的时候发现调试器的小箭头无法定位到 x 或者 垃圾桶 的删除图标。

 

原因：

最后排查出来的问题是当前页面使用了 AMapUI 组件库 中的 海量点插件，它会重新生成一层 canvas 对象盖在地图上面，刚好把测距的给盖住了，按理来说不应该是这样。

 

解决办法：

还好，海量点能调整 z-index 层级，我看了一下，测距工具生成的点跟 marker 同一层级是120，把海量点的 zIndex 属性调整为119即可解决问题。