使用Google Maps overlays的事件侦听器而不是标记？

Question

下面我有一个在谷歌地图上生成一个标记和一个mapLabel (扩展overlay类)的代码片段。

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

我不确定如何让它工作，我尝试过使用"DomListener“和各种迭代，但在我调试时，它似乎都没有命中那一行代码。

如何才能右键单击删除我的mapLabel对象？

​

var map;


function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13
    });
  addPlace();
  placeLabel();
}

function addPlace() {
  var marker = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(37.4419, -122.1419)
  });
  google.maps.event.addListener(marker, 'rightclick', function() {
    this.setMap(null);
  });
}

function placeLabel() {
  var mapLabel = new MapLabel({
    text: 'Right click to delete??',
    position: new google.maps.LatLng(37.4419, -122.1419),
    map: map,
    fontSize: 21,
    align: 'center'
  });
  google.maps.event.addListener(mapLabel, 'rightclick', function() {
    this.setMap(null);
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 250px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://googlemaps.github.io/js-map-label/src/maplabel-compiled.js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

​

Answer 1

MapLabel没有事件侦听器，但MarkerWithLabel有。这样做的方式是他们有一个几乎透明的div覆盖在标签上。所有监听程序都将添加到此div。

类似的事情也可以用MapLabel来完成。在这里看一下MarkerWithLabel的源代码：http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js

以下是我自己的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添加到最上面的层overlayMouseTarget。

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();
    }
};

Answer 2

尝试使用“mousedown”而不是“which click”，然后区分它是哪种类型的点击。

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

鼠标点击代码MSDN API：0:无按钮1:左键2:中键(如果有) 3:右键