Javascript 处理重叠元素上的单击

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

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

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

问题是如何处理单击，它将在游标下的所有元素上触发事件

---

如果圆圈的数据来自数据库，则可以将圆圈的clickable属性设置为false，并将click事件处理程序附加到地图本身。然后，当点击发生时，通过AJAX调用将点击的lat/lon发送到服务器，并在数据库中查找覆盖该点的圆。不用说，一个空间启用的数据库（如PostgreSQL/PostGIS）将使任务变得更加简单。

了解HTML和javascript中的事件冒泡，您应该能够编写一个适用于所有重叠元素的事件侦听器

---

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

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

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

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
    }
}

var latlng=\u单击了\u LAT\u LNG\u OBJECT；//从地图的单击事件获取此信息
对于（变量i=0；i

不确定这是否有效，因为google.maps.Circle类不是DOM对象，您无法直接访问表示它的DOM对象。

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
    }
}