项目需求中需要动态渲染出一些多边形和行政区域,并且用户在点击这些覆盖物的时候,弹出一些介绍信息
如图所示.png
事件绑定代码如下,以圆圈形覆盖物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)
})
},
}
网友评论