javascript - 处理重叠元素的点击

Question

我有谷歌地图应用程序，在地图上显示一些圆圈。一些圆圈相互重叠，如下图所示。

单击圆圈时，我想显示一些附加信息。问题是，当单击重叠区域时，我想显示有关多个圆圈的信息。

呈现此信息的方法不太重要。它可以是 InfoWindow，也可以显示在地图之外的某个 DOM 元素中。没关系。

问题是如何处理点击它会触发光标下所有元素的事件。

Answer 1

Learn about event bubbling in HTML and javascript, you should be able to code an event listener that would work for all overlapping elements.

http://www.quirksmode.org/js/events_order.html

Answer 2

首先，您可以为 Circle 对象添加一个方法，以便您可以检查它是否包含地图上的点击点：

google.maps.Circle.prototype.contains = function(latLng) {
    return this.getBounds().contains(latLng) && google.maps.geometry.spherical.computeDistanceBetween(this.getCenter(), latLng) <= this.getRadius();
}

然后，您应该将您创建的所有圆形对象添加到数组中。假设这是我正在谈论的数组：

var circles = new Array();

最后，当用户点击地图上的一个点时，你应该得到纬度和经度并检查上面数组的所有元素。

var latlng = _CLICKED_LAT_LNG_OBJECT_; // Get this from your map's click event

for(var i = 0; i < circles.length; i++) {
    var _circle = circles[i];
    if( _circle.contains( latlng ) ) {
        // here, you've got a clicked circle ;)
        // do whatever you want with _circle
    }
}

Answer 3

如果您的圈子的数据来自数据库，您可以将圈子的可点击属性设置为 false 并将点击事件处理程序附加到地图本身。然后，当点击发生时，您通过 AJAX 调用将点击的纬度/经度发送到服务器，并在数据库中查找覆盖该点的圆圈。不用说，启用空间的数据库（如 PostgreSQL/PostGIS）会使任务变得容易得多。