处理重叠元素的点击

我有Google地图应用程序，它在地图上显示一些圈子。如下图所示，某些圈子彼此重叠。处理重叠元素的点击

我想单击圆圈时显示一些额外的信息。问题是，我想在单击重叠区域时显示有关更多该圆的信息。

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

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

Overlapping Circles

2012-08-03 Kamil Z

首先，您可以添加到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 
    } 
}

来源

2012-08-03 20:42:11 sedran

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

来源

2012-08-03 10:18:43 Marcelo

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

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

来源

2012-08-03 10:23:03

不确定这是否会工作，因为google.maps.Circle类不是DOM对象，并且您不能直接访问表示它的DOM对象。 – Marcelo 2012-08-04 09:31:13

处理重叠元素的点击

回答

相关问题