百度地图的覆盖物在手机上无法点击
在解决问题之前，我阅读了以下文章
百度地图自定义覆盖物手机端添加点击事件无效
https://blog.csdn.net/Seven521m/article/details/80353046
百度地图自定义覆盖物，在手机上无法监听click事件
https://blog.csdn.net/m0_37967720/article/details/82868548
百度地图自定义覆盖物手机端添加点击事件无效
https://blog.csdn.net/weixin_40918067/article/details/89504694
Vue 移动端项目 百度地图 点击事件无效、不触发 解决方案
https://blog.csdn.net/Davis_Dxs/article/details/82425211
【知乎】百度地图自定义覆盖物手机端无法触发click问题
https://zhuanlan.zhihu.com/p/28160341
发现《Vue 移动端项目 百度地图 点击事件无效、不触发 解决方案》这篇文章还是可圈可点的，思路清奇。
出现问题的原因
因为百度地图手机端默认的事件是拖动，屏蔽了其他事件，原生的Marker是可以触发的,但是自定义的覆盖物是不可以的。
从上面的话，我们就可以得出，禁用拖拽就可以恢复点击事件（click）了！
那么在什么时候禁用拖拽什么时候启用拖拽呢？
地图加载完成禁用拖拽，触摸移动时启用拖拽，触摸结束禁用拖拽！
解决问题
在百度的JavaScript API v3.0类参考
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference_3_0.html
| 方法 | 返回值 | 描述 |
| enableDragging() | none | 启用地图拖拽，默认启用 |
| disableDragging() | none | 禁用地图拖拽 |
| 事件 | 参数 | 描述 |
| tilesloaded | {type, target} | 当地图所有图块完成加载时触发此事件 |
| touchstart | {type, target, point,pixel} | 触摸开始时触发此事件，仅适用移动设备 |
| touchmove | {type, target, point,pixel} | 触摸移动时触发此事件，仅适用移动设备 |
| touchend | {type, target, point,pixel} | 触摸结束时触发此事件，仅适用移动设备 |
| longpress | {type, target, point,pixel} | 长按事件，仅适用移动设备 |
代码
/*地图加载完毕*/
map.addEventListener("tilesloaded", function () {$("div.anchorBL").remove();//隐藏百度LOGO $("div.BMap_cpyCtrl.BMap_noprint.anchorBL").remove();//隐藏版权 // 初始化地图 禁止拖动 注：虽禁止拖动，但是可以出发拖动事件map.disableDragging();});// TODO: 触摸移动时触发此事件 此时开启可以拖动。虽然刚初始化该地图不可以拖动，但是可以触发拖动事件。
map.addEventListener("touchmove", function (e) {
map.enableDragging();
});
// TODO: 触摸结束时触发次此事件 此时开启禁止拖动
map.addEventListener("touchend", function (e) {
map.disableDragging();
});
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！