在 OverlayView div 占据的区域中禁用 Google 地图“点击”事件

Question

我正在制作一个谷歌地图（v3）混搭，其中有一个用于点击事件的地图侦听器。

google.maps.event.addListener(map, 'click', function(event) {addMarker(event)});

地图上的此单击事件会创建一个新标记。 但是，我还在单击标记时使用 jQuery 按钮构建了 OverlayView（在谷歌地图的 floatPane 中）。

markerDialogOverlay.prototype.onAdd = function()
{
    var divToAdd = document.createElement('div');
    divToAdd.id = 'markerHelper';
    divToAdd.title = 'Edit Marker';
    this.div = divToAdd;

    var panes = this.getPanes();
    panes.floatPane.appendChild(this.div);

    this.jqdiv = $('#markerHelper');
    this.jqdiv.empty();
}

markerDialogOverlay.prototype.draw = function()
{

    overlayProjection = this.getProjection();

    var posxy = overlayProjection.fromLatLngToDivPixel(this.marker.getPosition());

    this.jqdiv.css({ 'z-index': '1',
                   'left': posxy.x + 'px',
                   'top': posxy.y + 'px',
                   'position' : 'absolute'});

    this.jqdiv.append($('<button id="deleteMarker">Delete</button>').button().click(function(){deleteLocation(this.marker)}).hide().fadeIn('slow'));

}

单击 jQuery 按钮后，jQuery 按钮单击事件和谷歌地图单击事件都会被触发，但我只想触发 jQuery 按钮单击。

我仍然想启用地图单击事件，只是不在 OverlayView div 所在的位置启用。 关于如何解决这个问题有什么想法吗？

Answer 1

我在谷歌地图论坛中进行了一些搜索，发现了这个主题：http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/ef6e8e2942421bab/ff3739505eb833df?pli=1 。 取消事件传播到地图解决了这个问题。

Answer 2

你的帖子确实帮助我更好地理解了这一点，因为我也在做类似的事情。

有趣的是 - 在读这篇文章之前我不清楚 - 在 API 中，无法在 onAdd 方法中创建 jquery 对象。你必须在 draw 方法中执行 jquery。

Answer 3

喜欢使用 2009 年的答案！ （回复：Susannah [Google 员工]）您还可以禁用鼠标滚动：

//cancels scroll
google.maps.event.addDomListener(div, 'mousewheel', cancelEvent);