Front-End

百度地图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();
    ……
 },

以上, 如果网友们有更好的方法,欢迎留言告知,谢谢。

上一篇 下一篇

猜你喜欢

热点阅读