处理重叠元素的点击

Question

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

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

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

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

Answer 1

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

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

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