时间戳

首页 > 解决方案 > 如果 google.maps.Rectangle 和 InfoBox 重叠，地图上的点击事件会触发两次

javascript - 如果 google.maps.Rectangle 和 InfoBox 重叠，地图上的点击事件会触发两次

问题描述

我正在使用 Google Maps API v.3 和 custom InfoBox。

问题是，如果InfoBox高于并且重叠，则地图上的Click事件会触发两次。google.maps.RectangleInfoBoxpanepanegoogle.maps.Rectangle

默认google.maps.InfoWindow工作正常，click事件不会“渗透”到基础元素上，例如google.maps.Rectangle.

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

我怎样才能避免这种渗透？

标签： javascriptgoogle-maps-api-3

解决方案

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

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

这是通过调用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",
};

推荐阅读