百度地图marker事件脱坑总结(二)
2020-04-29 本文已影响0人
sphenginx
缘起
百度地图2.0 marker 绑定点击事件, 现在有需求,点击dom某个元素的时候,需要触发 marker的点击事件,为了方便获取marker的dom元素, 自定义marker 如下(ES6写法):
export class myMarker extends BMap.Marker {
initialize (map) {
this._dom = super.initialize(map);
return this._dom;
}
getDom() {
return this._dom;
}
}
主要是封装了一个 getDom
方法, 可以获取marker的dom信息。
maker 绑定事件:
marker.addEventListener('click', () => {
setTimeout(() => {
self._categoryComplexData = data;
self._map.clearOverlays();
……
self._renderCenterMarker(); //只加载中心坐标marker,并不需要设置中心点为地图中心
self._renderCategoryMapInfo(self._aroundList[self._currentCatory]);
self._panTo(data.gps);
self._setting.vue.setOn(data.code);
self._setting.vue.scrollRefs(data.code);
});
});
// map保存到一个map对象
this.markers[data.code] = marker;
地图相关控件,记录marker的集合, key为相关的code, 点击dom元素时,可以获取到code,同时根据 code 获取到对应的 marker,然后触发marker的点击事件就好了。但是试了很多方法都无果:
……
cateItem(item) {
//方法一:
this.around.markers[item.code].click();
// 方法二:
this.around.markers[item.code].getDom().click();
……
},
性空:
后来打印 marker 发现,是一个对象V(百度再搞什么鬼),并不是dom,而且没有点击事件。 网上也没有找到 marker 实现的源码, 最后只能绑了两遍点击事件。
marker 绑定了一个, 它的儿子dom绑定了一个:
let clickFunc = () => {
// 绑定统计事件
……
setTimeout(() => {
self._categoryComplexData = data;
……
self._map.clearOverlays();
self._renderCenterMarker(); //只加载中心坐标marker,并不需要设置中心点为地图中心
self._renderCategoryMapInfo(self._aroundList[self._currentCatory]);
self._panTo(data.gps);
self._setting.vue.setOn(data.code);
self._setting.vue.scrollRefs(data.code);
});
};
marker.addEventListener('click', clickFunc);
// 无法主动触发覆盖物的点击事件,只能在dom元素上再次绑定点击事件
marker.getDom().addEventListener('click', clickFunc);
self.markers[data.code] = marker;
这样, 点击Vue dom的元素时, 可以触发 marker dom的点击事件:
cateItem(item) {
this.around.markers[item.code].getDom().click();
……
},
以上, 如果网友们有更好的方法,欢迎留言告知,谢谢。