百度地图marker事件脱坑总结

缘起

百度地图2.0 marker 绑定点击事件，事件内有清空覆盖物的调用，这时候会出现js报错：

map.clearOverlays() 报错

js 报错信息如下：

Uncaught TypeError: Cannot read property 'D' of null
at HTMLSpanElement.eval (eval at AZ (getscript?v=2.0&ak=7ddc93ed0c39a341210b0b01b1174b4a&services=&t=20190123111209:1), <anonymous>:1:1072)

marker绑定点击事件如下：

marker.addEventListener('click', function(e) {
    self._categoryComplexData = data;
    self._map.clearOverlays();
    self._renderCenterMarker(); //只加载中心坐标marker，并不需要设置中心点为地图中心
    self._renderCategoryMapInfo(self._aroundList[self._currentCatory]
});

性空

后来，通过断点调试代码发现百度地图 touchend 事件的代码执行顺序：

1、先执行用户绑定的click事件
2、执行完成之后再执行百度自己默认的事件。
3、或者执行dbclick事件

x.M(this.V, "touchend", function(c) {
    var e = $a()
      , f = new R(c.changedTouches[0].clientX,c.changedTouches[0].clientY);
    10 < Math.abs(f.x - b.ca.IB.x) || 10 < Math.abs(f.y - b.ca.IB.y) ? b.ca.IB = p : (b.dispatchEvent(a(c, la(new M("onclick"), c))),
    e - b.gH < b.map.D.kC && b.dispatchEvent(a(c, la(new M("ondblclick"), c))),
    b.gH = e)
}),

marker用户绑定事件执行完成后，这时已经执行完毕 clearOverlays, 当前元素已经删除，继续执行百度内置的一些逻辑，会发现marker不存在，所以会报Cannot read property 'D' of null at HTMLSpanElement.eval……这个错误提示。

这里的解决方案是：

用 setTimeout 把该点击事件放在宏任务，先执行百度内置的绑定事件，下次 event-loop 时执行marker的click事件，就不会出错了。

也就是说执行顺序发生了变更：

1、执行百度自己的点击事件。
2、然后执行用户绑定的相关事件

附百度地图移动端执行的相关代码：

marker.addEventListener('click', function(e) {
    setTimeout(function(){
        self._categoryComplexData = data;
        self._map.clearOverlays();
        self._renderCenterMarker(); //只加载中心坐标marker，并不需要设置中心点为地图中心
        self._renderCategoryMapInfo(self._aroundList[self._currentCatory]);
    });
});

此坑已填平：

setTimeout 解决

附：javaScript macro-task（宏任务）与micro-task（微任务）

最后编辑于：2021.07.05 10:42:17