如何处理实现google.maps.OverlayView的骨干事件



My Backbone View 实现了google.maps.OverlayView() .

此视图包含

一些用于内容的div,我需要在容器div 上处理鼠标悬停/出出,并在两个包含div 的视图上单击事件。

我能够获取所需事件的唯一方法是在我的视图中使用 google.maps.event.addDomListener。像这样(复制和粘贴代码):

var MarkerView = MasterView.extend({
    events:{
        //These events will never be fired
        'click .icon-context':function () {},
        'mouseout':function (event) {}
    },
    render:function(){
      //this renders the google.maps.OverlayView by implementing onAdd, draw, onRemove 
      var that = this;
      this.overlay.onAdd = function(){
        //Code for adding the OverLayView omitted here
        that.listeners_ = [
          google.maps.event.addDomListener(that.overlay.el, 'mouseout', function () {
            //This event should not be handled here
          }),
          google.maps.event.addDomListener($(that.overlay.el).find('.icon-context').first()[0], 'click', function () {
            //This event should not be handled here
          }),            
        ];
      };
    }
});

视图逻辑的核心部分应该是可重用的,因为我想在地图上和显示/处理几乎相同内容的列表中使用它。将我的视图绑定到 Google 地图事件侦听器后,我将不得不复制大量代码来处理事件。感觉这样做不太对。

如果视图托管在google.maps.OverlayView内,如何使我的视图"本机"处理事件

在创建叠加层并将其添加到 HTML 后 ,您必须在视图上使用this.setElement($(that.overlay.el)),以便更新 EL,以便您可以使用事件哈希。

如果你实例化一个新的覆盖,你必须再次这样做,使EL指向正确的事情。

不要忘记将其包装在Jquery obj中,这在尝试将事件处理程序添加到infoBox时对我有很大帮助

最新更新