我有一个继承自ImageOverlay
的自定义重叠类(google.maps.OverlayView
)。我希望它能够响应Google Maps点击事件(不仅仅是DOM点击事件),而只是使用addListener
似乎无法解决问题。
e.g。我有一个shapes
数组,其中包含google.maps.Polygon
和ImageOverlay
个对象的混合:
for (var i in shapes) {
google.maps.event.addListener(shapes[i], 'click', function(){alert('hi')});
}
单击多边形会触发警报,但单击自定义叠加层不会执行任何操作。
如何让Google Maps API将叠加视为可点击?
答案 0 :(得分:60)
v3更新:overlayLayer
不再接受鼠标事件。将叠加层添加到overlayMouseTarget
,添加侦听器,它应该正常接收鼠标事件。
//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');
});
请参阅:http://code.google.com/apis/maps/documentation/javascript/reference.html#MapPanes
答案 1 :(得分:12)
Maps API无法自动确定您的叠加层的哪些部分应该是可点击的(例如,如果您渲染具有透明背景的图像,则可以使用叠加层来确定透明区域中的点击是否有效点击与否。)
您应该将DOM侦听器添加到您绘制的叠加层,然后触发您自己的Maps API点击事件(如果这是有效点击)。
示例:
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.
}
答案 2 :(得分:0)
您可能还希望停止事件传播,以便Overlay上的点击不会传播到下面的元素(例如,多边形,标记等等,取决于您的窗格)
//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');
}
});
答案 3 :(得分:0)
适用于GoogleAPI v3。正如大家在下面所说,但有一些更正:
在 LocalityCustomOverlay.prototype.onAdd 功能中:
$(function() {
var stuff = {};
$(".no-drag").each(function(k, v) {
var id = $(v).attr("id");
var top = $(v).position().top;
var left = $(v).position().left;
var bottom = top + $(v).height();
var right = left + $(v).width();
stuff[k] = {
id: id,
top: top,
left: left,
bottom: bottom,
right: right
};
});
console.log(stuff);
$("#obj-1").draggable({
containment: '#move-frame',
drag: function(e, ui) {
var objW = ui.helper.width();
var objH = ui.helper.height();
var objP = ui.position;
var buffer = 2;
objP.right = objP.left + objW;
objP.bottom = objP.top + objH;
$(this).find(".top").html("T: " + objP.top);
$(this).find(".left").html("L: " + objP.left);
$(this).find(".bottom").html("B: " + objP.bottom);
$(this).find(".right").html("R: " + objP.right);
$.each(stuff, function(k, v) {
if (objP.right == v.left - buffer) {
var $el = $("#" + v.id);
$el.css("left", v.left + buffer);
v.left += buffer;
$el.find(".top").html("T: " + $el.position().top);
$el.find(".left").html("L: " + $el.position().left);
}
if (objP.bottom == v.top - buffer) {
var $el = $("#" + v.id);
$el.css("top", v.top + buffer);
v.top += buffer;
$el.find(".top").html("T: " + $el.position().top);
$el.find(".left").html("L: " + $el.position().left);
}
});
}
});
});
在外面,直接到您的自定义叠加层:
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);
});