使自定义叠加层可点击(Google Maps API v3)

时间:2010-07-29 11:09:52

标签: overlay google-maps-api-3

我有一个继承自ImageOverlay的自定义重叠类(google.maps.OverlayView)。我希望它能够响应Google Maps点击事件(不仅仅是DOM点击事件),而只是使用addListener似乎无法解决问题。

e.g。我有一个shapes数组,其中包含google.maps.PolygonImageOverlay个对象的混合:

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

单击多边形会触发警报,但单击自定义叠加层不会执行任何操作。

如何让Google Maps API将叠加视为可点击?

4 个答案:

答案 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); 
});