美文网首页Front-End
百度地图marker事件脱坑总结(二)

百度地图marker事件脱坑总结(二)

作者: sphenginx | 来源:发表于2020-04-29 16:39 被阅读0次

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

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

    相关文章

      网友评论

        本文标题:百度地图marker事件脱坑总结(二)

        本文链接:https://www.haomeiwen.com/subject/ttlnwhtx.html