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时对我有很大帮助