在自定义谷歌地图标记（VUE JS）上绑定点击事件

Question

大家好，

所以我在这个项目上使用了Vue JS，我试图实现的是一个带有谷歌地图API V3整页的组件。在此地图上，有一些自定义标记从api的数据填充。每个标记都与即将发生的事件有关（具有ID，日期，位置，描述，出席......）。 单击标记时，我需要在屏幕右侧显示当前事件信息。

我的问题是绑定此点击事件

（我可以在点击事件上轻松显示console.log但不与我的vue组件交互）

由于我以编程方式创建了这些标记（由于谷歌地图APi而使用普通JS）我无法使用@click指令。那么伙计们，哪种解决方案适合实现尝试呢？

我是否遗漏了与Vue JS有关的方法？

这是我的代码的一部分

Custom marker code
function CustomMarker(latlng, map, id) {
    this.latlng = latlng;
    this.id = id;
    this.setMap(map);
};


CustomMarker.prototype = new google.maps.OverlayView();

CustomMarker.prototype.draw = function() {

    var self = this;

    var div = this.div;

    if (!div) {

        div = this.div = document.createElement('div');
        div.dataset.index = self.id;
        div.className = 'marker js-marker';
        div.append( self.id );

        var panes = this.getPanes();
        panes.overlayImage.appendChild(div);
    }

    var point = this.getProjection().fromLatLngToDivPixel(this.latlng);

    if (point) {
        div.style.left = (point.x - 15) + 'px';
        div.style.top = (point.y - 15) + 'px';
    }
};

CustomMarker.prototype.remove = function() {
    if (this.div) {
        this.div.parentNode.removeChild(this.div);
        this.div = null;
    }
};

CustomMarker.prototype.getPosition = function() {
    return this.latlng;
};

添加标记的Vue代码

created: function(){
    this.$http.get('/api/event').then( (response) => { 
        this.events = response.data;
        this.events.forEach((event) => {
            const position = new google.maps.LatLng(event.acf.location.lat, event.acf.location.lng);
            const marker = new CustomMarker(position, this.map, event.id);

            this.markers.push(marker);
            this.map.fitBounds(this.bounds.extend(position));
        });
    });
},