Google maps 使用谷歌地图覆盖的事件监听器而不是标记？

下面我有一个片段，它在google地图上生成了一个标记和一个mapLabel（它扩展了overlay类）

我尝试实现一个事件侦听器，它通过右键单击删除覆盖，就像我对标记所做的那样，但它不起作用

我不知道如何使它工作，我尝试过使用“DomListener”和各种迭代，但当我调试时，它似乎甚至没有碰到那行代码

如何使其右键单击以删除mapLabel对象

var映射；
函数初始化（）{
map=新建google.maps.map(
document.getElementById（“地图画布”）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13
});
addPlace（）；
placeLabel（）；
}
函数addPlace（）{
var marker=new google.maps.marker({
地图：地图，
位置：新google.maps.LatLng（37.4419，-122.1419）
});
google.maps.event.addListener（标记“右键单击”，函数（）{
此.setMap（null）；
});
}
函数placeLabel（）{
var mapLabel=新的mapLabel({
文本：“右键单击可删除？”，
位置：新google.maps.LatLng（37.4419，-122.1419），
地图：地图，
尺寸：21，
对齐：“居中”
});
google.maps.event.addListener（mapLabel，'rightclick'，function（）{
此.setMap（null）；
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体
#地图画布{
高度：250px；
宽度：500px；
边际：0px；
填充：0px
}
尝试使用“鼠标向下”而不是“右键单击”，然后区分是哪种类型的单击

 google.maps.event.addListener(mapLabel, 'mousedown', function(e) {
    if(e.which === 3)
    {
       this.setMap(null);
    }
  });

鼠标点击代码：
0:没有按钮
1：左键
2：中间按钮（如有）
3：右键
尝试使用“鼠标向下”而不是“右键单击”，然后区分是哪种类型的单击

 google.maps.event.addListener(mapLabel, 'mousedown', function(e) {
    if(e.which === 3)
    {
       this.setMap(null);
    }
  });

鼠标点击代码：
0:没有按钮
1：左键
2：中间按钮（如有）
3：右按钮MapLabel没有事件侦听器，但MarkerWithLabel有。这样做的方式是他们有一个几乎透明的div放置在标签上。任何侦听器都将添加到此div

可以使用MapLabel执行类似的操作。请在此处查看MarkerWithLabel的源代码：

下面是我自己的MapLabel备选方案中的一些代码片段。它并不完整，也没有经过测试，但它应该让你开始

MapLabel.prototype.onAdd = function() {
  var eventDiv = this.eventDiv_ = document.createElement('div');

  // ...

  this.drawCanvas_();

  this.drawEventDiv_();

  var panes = this.getPanes();
  if (panes) {
    panes.overlayMouseTarget.appendChild(eventDiv);

    panes.overlayImage.appendChild(canvas);
  }

  // ...

};

将div添加到最上层OverlyMouseTarget

MapLabel.prototype.drawEventDiv_ = function() {
  var eventDiv = this.eventDiv_;
  if (!eventDiv) return;

  var canvasWidth = this.canvas_.getContext('2d').measureText(this.get('text')).width;
  var canvasHeight = this.get('fontSize');

  eventDiv.innerHTML = this.get('text');
  // This is needed for proper behavior on MSIE:
  eventDiv.setAttribute("onselectstart", "return false;");
  eventDiv.setAttribute("ondragstart", "return false;");

  var eventDivStyle = this.eventDiv_.style;
  eventDivStyle.width = canvasWidth + 'px';
  eventDivStyle.height = canvasHeight + 'px';
  eventDivStyle.cssText = this.get('text');
  eventDivStyle.font = this.get('fontSize') + 'px ' + this.get('fontFamily');
  eventDivStyle.position = 'absolute';
  eventDivStyle.opacity = 0.01; // Don't use 0; DIV won't be clickable on MSIE
  eventDivStyle.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\"";
  eventDivStyle.filter = "alpha(opacity=1)"; // For MSIE
  eventDivStyle.marginLeft = this.getMarginLeft_(canvasWidth) + 'px';
  eventDivStyle.zIndex = /** @type number */(this.get('zIndex'));
};

要添加事件侦听器，请执行以下操作：

google.maps.event.addDomListener(this.eventDiv_, 'click', function (e) {
  //..

  this_.cAbortEvent(e); // Prevent click from being passed on to map
});

cAbortEvent可防止起泡

MapLabel.prototype.cAbortEvent = function(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }
    e.cancelBubble = true;
    if (e.stopPropagation) {
      e.stopPropagation();
    }
};

MapLabel没有事件侦听器，但MarkerWithLabel有。这样做的方式是他们有一个几乎透明的div放置在标签上。任何侦听器都将添加到此div

可以使用MapLabel执行类似的操作。请在此处查看MarkerWithLabel的源代码：

下面是我自己的MapLabel备选方案中的一些代码片段。它并不完整，也没有经过测试，但它应该让你开始

MapLabel.prototype.onAdd = function() {
  var eventDiv = this.eventDiv_ = document.createElement('div');

  // ...

  this.drawCanvas_();

  this.drawEventDiv_();

  var panes = this.getPanes();
  if (panes) {
    panes.overlayMouseTarget.appendChild(eventDiv);

    panes.overlayImage.appendChild(canvas);
  }

  // ...

};

将div添加到最上层OverlyMouseTarget

MapLabel.prototype.drawEventDiv_ = function() {
  var eventDiv = this.eventDiv_;
  if (!eventDiv) return;

  var canvasWidth = this.canvas_.getContext('2d').measureText(this.get('text')).width;
  var canvasHeight = this.get('fontSize');

  eventDiv.innerHTML = this.get('text');
  // This is needed for proper behavior on MSIE:
  eventDiv.setAttribute("onselectstart", "return false;");
  eventDiv.setAttribute("ondragstart", "return false;");

  var eventDivStyle = this.eventDiv_.style;
  eventDivStyle.width = canvasWidth + 'px';
  eventDivStyle.height = canvasHeight + 'px';
  eventDivStyle.cssText = this.get('text');
  eventDivStyle.font = this.get('fontSize') + 'px ' + this.get('fontFamily');
  eventDivStyle.position = 'absolute';
  eventDivStyle.opacity = 0.01; // Don't use 0; DIV won't be clickable on MSIE
  eventDivStyle.MsFilter = "\"progid:DXImageTransform.Microsoft.Alpha(opacity=1)\"";
  eventDivStyle.filter = "alpha(opacity=1)"; // For MSIE
  eventDivStyle.marginLeft = this.getMarginLeft_(canvasWidth) + 'px';
  eventDivStyle.zIndex = /** @type number */(this.get('zIndex'));
};

要添加事件侦听器，请执行以下操作：

google.maps.event.addDomListener(this.eventDiv_, 'click', function (e) {
  //..

  this_.cAbortEvent(e); // Prevent click from being passed on to map
});

cAbortEvent可防止起泡

MapLabel.prototype.cAbortEvent = function(e) {
    if (e.preventDefault) {
      e.preventDefault();
    }
    e.cancelBubble = true;
    if (e.stopPropagation) {
      e.stopPropagation();
    }
};

MapLabel
没有单击事件（或右键单击事件）。
MapLabel
没有单击事件（或右键单击事件）。