Question

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

以下是一个示例（＆＃34;叠加，点击我＆＃34; div应将其文字更改为＆＃34;适用于叠加＆＃34;点击时，但从不这样做）：

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 包含接收DOM鼠标事件的元素，例如标记的透明目标。它高于 floatShadow，以便信息窗口阴影中的标记可以点击。

Working js fiddle example （已更新为包含叠加层的样式）。

干杯。

Google Maps V3 Custom Overlay儿童停止接收鼠标事件

1 个答案: