在OverlayView div占用的区域中禁用Google Map“click”事件

时间:2011-02-26 03:13:57

标签: jquery google-maps google-maps-api-3

我正在制作谷歌地图(v3)mashup,其中有一个点击事件的地图监听器。

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

地图上的此点击事件会导致创建新标记。但是,我也在点击标记时使用jQuery按钮构建OverlayView(在google地图的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按钮点击事件和google地图点击事件都会被触发,但我只想点击jQuery按钮点击。

我仍然想要启用地图点击事件,而不是OverlayView div所在的位置。关于如何解决这个问题的任何想法?

2 个答案:

答案 0 :(得分:5)

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

答案 1 :(得分:0)

你的帖子确实帮助我更好地理解了这一点,因为我正在处理与此类似的事情。

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