Javascript 谷歌地图第3版中的z索引覆盖

我试图在google maps api v3中获得一个覆盖，以显示在所有标记之上。但谷歌api似乎总是把我的覆盖放在z索引优先级最低的位置。我找到的唯一解决方案是遍历DOM树并手动将z-index设置为更高的值。糟糕的解决方案

我正在将我的a新div添加到我的覆盖中，包括：

 onclick : function (e) {
     var index = $(e.target).index(),
         lngLatXYposition = $.view.overlay.getProjection().fromLatLngToDivPixel(this.getPosition());
         icon = this.getIcon(),
         x = lngLatXYposition.x - icon.anchor.x,
         y = lngLatXYposition.y - icon.anchor.y

     $('<div>test</div>').css({ left: x, position: 'absolute', top: y + 'px', zIndex: 1000 }).appendTo('.overlay');
}

$.view.overlay = new GmapOverlay( { map: view.map.gmap });

GmapOverlay继承了新的google.maps.OverlayView

有什么想法吗

---

..fredrik

您不能更改OverlayView的zIndex（它没有这样的属性），但它包含包含DOM节点的窗格。这就是可以使用z-index属性的地方

...
lngLatXYposition = $.view.overlay.getPanes().overlayLayer.style['zIndex'] = 1001;
...

---

如果您关心与标记交互（即拖动标记），则将覆盖层的z-index设置为104似乎是一个“神奇”数字。如果高于104，则无法与标记交互。想知道是否有不太脆弱的解决方案…

如果有人遇到与我相同的问题，以下是我的问题和解决方案：

我需要一个覆盖视图，它可以为标记添加工具提示，但我的弹出覆盖视图一直显示在标记后面

我根据Google文档实现了OverlyView的一个子类：

编写自定义的

OverlayView.prototype.onAdd

函数时，需要指定要将覆盖附加到哪个窗格。我只是复制了代码，没有阅读周围的解释

在代码中，他们将覆盖层附加到

overlayer

窗格：

var panes = this.getPanes();
panes.overlayLayer.appendChild(div);

但您可以使用许多不同的地图窗格：

“MapPanes类型的窗格集指定地图上不同图层的堆叠顺序。” 地图。以下窗格是可能的，并按从下到上堆叠的顺序列出：

• MapPanes.mapPane（级别0）
• MapPanes.overlayLayer（级别1）
• MapPanes.markerLayer（二级）
• MapPanes.OverlyMouseTarget（三级）
• MapPanes.floatPane（级别4）

我希望覆盖图悬停在地图上的所有其他信息上，所以我使用

floatPane

窗格解决了问题

因此，不是：

this.getPanes().overlayLayer.appendChild(div)

您可以使用以下命令：

this.getPanes().floatPane.appendChild(div);

---

使用窗格.overlyMouseTarget.appendChild

如果希望通过鼠标单击（并使用“单击”或CSS pseudo:：hover等事件）将图层设置为目标，则应使用

overlaymousetarge

var panes=this.getPanes（）

panes.overlyMouseTarget.appendChild（this.div_41;

另见：

---

为了能够使用mapLabel类的paneType，我从google实用程序库（）向mapLabel类添加了paneType属性

这有助于使标签不被多段线隐藏

请查找mapLabel.js文件中添加的代码

MapLabel.prototype.onAdd = function() {
  var canvas = this.canvas_ = document.createElement('canvas');
  var style = canvas.style;
  style.position = 'absolute';

  var ctx = canvas.getContext('2d');
  ctx.lineJoin = 'round';
  ctx.textBaseline = 'top';

  this.drawCanvas_();

  var panes = this.getPanes();
  if (panes) {
    // OLD: panes.mapPane.appendChild(canvas)
    var paneType = this.get('paneType');
    panes[paneType].appendChild(canvas);
  }
};

MapLabel = function (opt_options) {
  this.set('fontFamily', 'sans-serif');
  this.set('fontSize', 12);
  this.set('fontColor', '#000000');
  this.set('strokeWeight', 4);
  this.set('strokeColor', '#ffffff');
  this.set('align', 'center');

  this.set('zIndex', 1e3);
  this.set('paneType', 'floatPane');

  this.setValues(opt_options);
}

使用paneType的示例代码：

    var mapLabel = new MapLabel({
      text: segDoc.curr_value.toFixed(0),
      position: new google.maps.LatLng(lblLat, lblLng),
      map: map.instance,
      fontSize: 12,
      align: 'center',
      zIndex: 10000,
      paneType: 'floatPane',
    });

---

谢谢！

免责声明：这是一个狡猾的解决方案，可能随时停止工作，您绝对不应该在生产中使用它。

对于那些寻找快速而肮脏的解决方案的人来说，这个CSS对我很有用：

.gm-style > div:first-child > div:first-child > div:nth-child(4) {
  z-index: 99 !important;
}

---

使用风险自负！

这是问题的准确答案。我不明白为什么不接受。这只是一个黑客行为。请参阅其他排名靠前的答案，以获得更可靠的解决方案。我用剪下的示例编辑了答案。这实际上应该是正确答案，而不是z索引黑客行为。谢谢你，我永远不会知道答案out floatPane。这是正确的方法。这不再是地图中使用的图层的有效列表。更新的文档在这里：非常感谢。Brilliant。修复了我的问题。我最初的问题是在使用panes.Overlayer.appendChild时，切换到overlayMouseTarget解决了它。