javascript - Google map V3 自定义叠加层子级停止接收鼠标事件

Question

自定义叠加层 (google.maps.OverlayView()) 子项用于响应鼠标事件。我注意到他们不再这样做了。

这是一个示例(“叠加，点击我”div 在单击时应将其文本更改为“适用于叠加”，但从未这样做):

http://savedbythegoog.appspot.com/?id=3fe560b541afaf7994e73a328d110f19e3864a06

这里是代码(剪切/粘贴到https://code.google.com/apis/ajax/playground/进行调试)，覆盖子点击监听器附加在USGSOverlay.prototype.onAdd()中

div.addEventListener("click", function(){ this.innerHTML="worked for overlay";});

//overlay-problem.js

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();

// Initialize the map and the custom overlay.

function initialize() {

  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  div.className="findme";
  div.style.width="150px";
  div.style.height="150px";
  div.style.backgroundColor="red";
  div.innerHTML="NOT overlay, click me";

  div.addEventListener("click", function(){this.innerHTML="Thanks, it worked for a regular div";});
  document.body.appendChild(div);

  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(62.323907, -150.109291),
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var swBound = new google.maps.LatLng(62.281819, -150.287132);
  var neBound = new google.maps.LatLng(62.400471, -150.005608);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  overlay = new USGSOverlay(bounds, map);
}

/** @constructor */
function USGSOverlay(bounds, map) {

  // Initialize all properties.
  this.bounds_ = bounds;
  this.map_ = map;
  this.div_ = null;

  // Explicitly call setMap on this overlay.
  this.setMap(map);
}

/**
 * onAdd is called when the map's panes are ready and the overlay has been
 * added to the map.
 */
USGSOverlay.prototype.onAdd = function() {


  var div = document.createElement('div');
  div.style.borderStyle = 'none';
  div.style.borderWidth = '0px';
  div.style.position = 'absolute';
  div.className="findme";
  div.style.width="150px";
  div.style.height="50px";
  div.style.backgroundColor="yellow";
  div.innerHTML="overlay, click me";
  div.addEventListener("click", function(){ this.innerHTML="worked for overlay";});
  this.div_ = div;

  // Add the element to the "overlayLayer" pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
};

USGSOverlay.prototype.draw = function() {

  // We use the south-west and north-east
  // coordinates of the overlay to peg it to the correct position and size.
  // To do this, we need to retrieve the projection from the overlay.
  var overlayProjection = this.getProjection();

  // Retrieve the south-west and north-east coordinates of this overlay
  // in LatLngs and convert them to pixel coordinates.
  // We'll use these coordinates to resize the div.
  var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
};

// The onRemove() method will be called automatically from the API if
// we ever set the overlay's map property to 'null'.
USGSOverlay.prototype.onRemove = function() {
  this.div_.parentNode.removeChild(this.div_);
  this.div_ = null;
};​

Answer 1

如果您将叠加层更改为:

，您的代码应该可以工作

panes.overlayLayer.appendChild(div);

至:

panes.overlayMouseTarget.appendChild(div);

From the docs:

overlayMouseTarget contains elements that receive DOM mouse events, such as the transparent targets for markers. It is above the floatShadow, so that markers in the shadow of the info window can be clickable.

<小时/>

<强> Working js fiddle example (已更新以包含叠加层的样式)。

<小时/>

干杯。