Question

我有一个继承自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将叠加视为可点击？

Answer 1

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

Answer 2

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.
}

Answer 3

您可能还希望停止事件传播，以便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');
    }
});

Answer 4

适用于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); 
});

使自定义叠加层可点击（Google Maps API v3）

4 个答案: