从可点击的谷歌地图覆盖传播鼠标事件

Posted 2023-02-23

【中文标题】从可点击的谷歌地图覆盖传播鼠标事件

【英文标题】：Propagating mouse events from clickable Google Maps overlays

【发布时间】：2013-10-29 14:10:05

【问题描述】：

是否可以在可点击的 Google 地图（圆形、多边形等）中叠加鼠标事件，但仍会将鼠标事件向下传播到底层地图？目前，例如一个可点击的圆圈似乎总是会隐藏地图中的事件。

示例：在这里，我希望在您单击圆圈时触发两个单击处理程序：http://jsfiddle.net/tW9SE/

var circle = new google.maps.Circle(
    map: map,
    center: center,
    radius: 100000,
    clickable: true
);

google.maps.event.addListener(map, "click", function()
    alert("Map clicked");
);

google.maps.event.addListener(circle, "click", function()
    alert("Circle clicked");
);

我在叠加层上找不到允许事件传播的属性，除了设置 clickable=false 并因此禁用叠加层本身的事件处理程序。

【问题讨论】：

在圆圈点击时，不能触发地图点击吗？

【参考方案1】：

只需自己触发点击：

google.maps.event.addListener(circle, "click", function()
    alert("Circle clicked");
    google.maps.event.trigger(map, 'click', null);
);

Marcelo's answer 中有关以编程方式触发 Google 地图点击的更多信息。

【讨论】：

是的，您可能是对的，只要 API 没有“enableEventPropagation”选项，这将是默认方式。但我认为我需要在更一般的层面上处理这个问题，然后我需要为每个事件（鼠标移动、单击、右键单击等）执行此操作。而且，如果地图和圆圈之间还有其他叠加层，我还需要处理对这些叠加层的事件传播。如果您理解的话，这似乎很麻烦。如果能够让事件通过各个层，那就太好了。但这可能是不可能的？

这取决于图层的构建方式。相互重叠的 z-indexed 层不一定嵌套在 DOM 中，因此标准事件冒泡可能不适用。

好点。看来您的解决方案是最好的解决方案。谢谢！