如果google.maps.Rectangle和InfoBox重叠，则地图上的Click事件会触发两次

Question

我正在使用Google Maps API v.3和自定义InfoBox 。

问题是Click ，如果在地图上的火灾事件两次google.maps.Rectangle和InfoBox重叠虽然pane信息框的高于 pane的google.maps.Rectangle 。

默认google.maps.InfoWindow可以正常工作，并且click事件不会对诸如google.maps.Rectangle类的基础元素“渗滤”。

我为测试目的准备了一个小例子 。

我如何避免这种渗滤？

Answer 1

当您单击地图中的任何内容时，单击事件会“冒泡”直到到达地图的根元素。 然后，事件处理程序根据单击的坐标来确定单击的内容。

阻止问题发生的一种方法是阻止click事件到达地图根目录。

这是通过在事件上调用event.stopPropagation()来完成的。 您可以添加执行此操作的事件处理程序； 例如在您的信息框中：

var infobox_options = {
    content: '<div onclick="event.stopPropagation()" style="cursor:default;width:100px;height:100px;border:2px solid #000;text-align:center;background:pink;z-index:10;"><a style="z-index:999" target="_blank" href="http://vk.com">CLICK</a></div>',
    disableAutoPan: true,
    //pixelOffset: pixelOffset,
    position: point,
    closeBoxURL: "",
    isHidden: false,
    pane: "floatPane",
};