處理重疊元素的點擊

Question

我有Google地圖應用程序，它在地圖上顯示一些圈子。如下圖所示，某些圈子彼此重疊。

我想單擊圓圈時顯示一些額外的信息。問題是，我想在單擊重疊區域時顯示有關更多該圓的信息。

呈現此信息的方法並不重要。它可以是InfoWindow，或者它可以顯示在地圖外的某個DOM元素中。沒關係。

問題是如何處理點擊，它會觸發光標下所有元素上的事件。

Answer 1

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

如果你的圈子中的數據來自於你可以在圈子的點擊屬性設置爲false，並單擊事件處理程序附加到地圖本身的數據庫。然後，當發生點擊時，您可以通過AJAX調用將點擊的緯度/經度發送到服務器，並在數據庫中查找哪些圈子覆蓋了該點。不用說，空間啓用的數據庫（如PostgreSQL/PostGIS）會使任務變得更容易。

Answer 3

瞭解HTML和JavaScript中的事件冒泡現象，您應該能夠編寫適用於所有重疊元素的事件偵聽器。

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