项目需求中需要动态渲染出一些多边形和行政区域，并且用户在点击这些覆盖物的时候，弹出一些介绍信息
事件绑定代码如下，以圆圈形覆盖物Circle为例
Circle.addEventListener('click', () => {
Toast({
message: '覆盖物的介绍信息',
position: 'top',
})
})
当前页面改成PC的时候，点击事件可以正常，但是手机页面就无法正常触发，注意，我这里遇到的问题只是自定义覆盖物在移动端无法正常点击事件，但是原生的覆盖物marker还是可以正常触发的。
问题初步定为是因为移动端的百度地图可能默认禁掉了对应的事件，尝试百度查找一下解决方法，找到了以下四种方法
1.禁用地图的拖拽功能，click事件就会正常触发
map.disableDragging();
尝试了一下，不起效果，禁用掉拖拽，也无法正常触发覆盖物的点击事件
2.使用touchstart,touchend等事件代替click
都进行了尝试，无效。
3.初始化百度地图的时候加上drawer参数设置地图绘制方式
const map = new BMap.Map("allmap", { drawMargin: 100, drawer: BMAP_SVG_DRAWER_FIRST })
map.addEventListener('click', function(e) {
circle.customClickHandler_ = function() {
console.log('点击了 circle')
};
if(e.overlay && e.overlay.customClickHandler_) {
e.overlay.customClickHandler_.call(e.overlay, e);
}
});
不知道这样添加的意义，反正试了也是没效果
4.引用百度的官方插件EventWrapper，并通过插件暴露的对象去添加点击事件
文件地址：http://api.map.baidu.com/library/EventWrapper/1.2/src/EventWrapper.js
添加事件：
BMapLib.EventWrapper.addDomListener(div, "touchend", function(e){
//...点击操作
console.log(pointer)
});
尝试了，依然不起效果。
查看了几十遍文章，大多是复制的，来来回回也就只看到这四种解决方法，都没能解决问题，没办法，只能自己去啃百度地图的官方API文档，相关API的地址：https://lbsyun.baidu.com/jsdemo.htm#kOverlayAddEvent
将文档里的代码原样都复制到自己的项目，都无法正常触发事件，仔细检查，发现问题只剩使用的百度地图的版本不一致这一点了，修改了一下版本，竟然真的可以了，天坑。。。
原来的版本是v3.0，修改成v1.0&type=webgl
注意修改成webgl版本，命名空间也要从BMap改为BMapGL，我是在vue的单个页面中动态引入的百度地图，引用代码修改如下：
export default {
init: function () {
//console.log("初始化百度地图脚本...");
const AK = 'your ak'
const BMap_URL =
'https://api.map.baidu.com/api?type=webgl&v=1.0&ak=' + AK + '&callback=onBMapCallback'
return new Promise((resolve, reject) => {
// 如果已加载直接返回
if (typeof BMapGL !== 'undefined') {
resolve(BMapGL)
return true
}
// 百度地图异步加载回调处理
window.onBMapCallback = function () {
console.log('百度地图脚本初始化成功...')
resolve(BMapGL)
}
// 插入script脚本
let scriptNode = document.createElement('script')
scriptNode.setAttribute('type', 'text/javascript')
scriptNode.setAttribute('src', BMap_URL)
document.body.appendChild(scriptNode)
})
},
}
