javascript - 处理重叠元素的点击

Question

我有一个在 map 上显示一些圆圈的 Google map 应用程序。一些圆圈相互重叠，如下图所示。

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

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

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

Answer 1

首先，你可以给Circle对象添加一个方法，这样你就可以检查它是否包含 map 上点击的点:

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();

最后，当用户点击 map 上的某个点时，您应该获取经纬度并检查上面数组的所有元素。

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