Làm cho lớp phủ tùy chỉnh có thể nhấp (API Google Maps v3)

Question

Tôi có lớp phủ tùy chỉnh (ImageOverlay) được kế thừa từ google.maps.OverlayView. Tôi muốn nó phản hồi các sự kiện nhấp chuột của Google Maps (không chỉ các sự kiện nhấp chuột DOM) mà chỉ đơn giản là sử dụng addListener dường như không thực hiện được điều này.

ví dụ: Tôi có một mảng shapes chứa một hỗn hợp của google.maps.Polygon và ImageOverlay đối tượng:

for (var i in shapes) { 
    google.maps.event.addListener(shapes[i], 'click', function(){alert('hi')}); 
} 

Nhấp vào đa giác gây nên một cảnh báo nhưng cách nhấn vào các lớp tùy chỉnh không có gì.

Làm cách nào để API Google Maps xử lý các lớp phủ là có thể nhấp?

Answer 1

Cập nhật cho v3: overlayLayer không chấp nhận sự kiện chuột nữa. Thay vào đó, hãy thêm lớp phủ của bạn vào overlayMouseTarget, thêm người nghe và sẽ nhận sự kiện chuột bình thường.

//add element to clickable layer 
this.getPanes().overlayMouseTarget.appendChild(div); 

// set this as locally scoped var so event does not get confused 
var me = this; 

// Add a listener - we'll accept clicks anywhere on this div, but you may want 
// to validate the click i.e. verify it occurred in some portion of your overlay. 
google.maps.event.addDomListener(div, 'click', function() { 
    google.maps.event.trigger(me, 'click'); 
}); 

Xem: http://code.google.com/apis/maps/documentation/javascript/reference.html#MapPanes

Answer 2

API Maps không thể tự động xác định phần nào của lớp phủ của bạn sẽ có thể nhấp (tức là nếu bạn hiển thị hình ảnh có nền trong suốt, nếu có thể lên lớp lớp phủ của bạn để xác định xem nhấp chuột trong vùng trong suốt có được tính là nhấp chuột hợp lệ hay không).

Bạn nên thêm trình lắng nghe DOM vào lớp phủ bạn vẽ và sau đó kích hoạt sự kiện nhấp API Maps của chính bạn nếu đây là một nhấp chuột hợp lệ.

Ví dụ:

FooBar.prototype.onAdd = function() { 
    // Create a div and append it to a map pane. 
    var div = document.createElement('div'); 
    div.style = "height: 100px; width: 100px"; 
    this.getPanes().overlayLayer.appendChild(div); 

    // set this as locally scoped var so event does not get confused 
    var me = this; 

    // Add a listener - we'll accept clicks anywhere on this div, but you may want 
    // to validate the click i.e. verify it occurred in some portion of your overlay. 
    google.maps.event.addDomListener(div, 'click', function() { 
    google.maps.event.trigger(me, 'click'); 
    }); 

    // Position your overlay etc. 
} 
</code> 

Answer 3

Bạn cũng có thể muốn ngăn chặn lan truyền sự kiện, do đó nhấp chuột vào Overlay sẽ không lan truyền đến các yếu tố dưới đây (ví dụ như đa giác, bút viết bảng, vv, phụ thuộc vào Pane của bạn)

//add element to clickable layer 
this.getPanes().overlayMouseTarget.appendChild(div); // or floatPane 

// set this as locally scoped var so event does not get confused 
var me = this; 

// Add a listener - we'll accept clicks anywhere on this div, but you may want 
// to validate the click i.e. verify it occurred in some portion of your overlay. 
google.maps.event.addDomListener(div, 'click', function(events) { 
    if (/*handling event*/) { 
     event.preventDefault(); // The important part 
    } 
    else { 
     google.maps.event.trigger(me, 'click'); 
    } 
}); 

Answer 4

cho GoogleAPI v3. Như kẻ nói dưới đây, nhưng với một số điều chỉnh:

Trong LocalityCustomOverlay.prototype.onAdd chức năng:

var self = this; 
google.maps.event.addDomListener(this._div, 'click', function(event) { 
    // stop click reaction on another layers 
    event.stopPropagation(); 

    // add also event to 3rd parameter for catching 
    google.maps.event.trigger(self, 'click', event); 
}); 

Bên ngoài, trực tiếp đến lớp phủ tùy chỉnh của bạn:

google.maps.event.addListener(CUSTOM_OVERLAY_OBJECT, 'click', function(event) { 
    console.log('event:', event); 
});