Question

下面我有一个代码片段，可以在谷歌地图上生成一个标记和一个mapLabel（它扩展了覆盖类）。

我试图实现一个事件监听器，通过右键单击删除叠加层，就像我对标记一样，但它不起作用!!!

我不知道如何使它工作，我尝试使用＆＃34; DomListener＆＃34;和各种迭代，但是当我调试它时，它似乎甚至没有碰到那行代码。

如何制作它以便我可以右键单击删除我的mapLabel对象???

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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'而不是'rightclick'，然后区分它是哪种类型的点击。

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

鼠标点击代码MSDN API： 0：没有按钮 1：左键 2：中键（如果有） 3：右键

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

2 个答案: