Question

我正在尝试在Google地图api v3中添加叠加层以显示在所有标记上方。但似乎google api总是将我的叠加层设置为最低的z-index优先级。我发现只有解决方案是遍历DOM树并手动将z-index设置为更高的值。解决方案不好。

我将新的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');
}

我在创建叠加层时尝试了所有可以考虑的属性。 zIndex，zPriority等。

我正在添加我的叠加层：

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

GmapOverlay继承自新的google.maps.OverlayView。

有什么想法吗？

..弗雷德里克

Answer 1

您无法更改OverlayView的zIndex（它没有此类属性），但它包含包含DOM节点的窗格。这就是你可以使用z-index属性的地方;

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

Answer 2

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

我需要一个OverlayView，它会为标记添加工具提示，但我的弹出式叠加层仍然显示在后面的标记。

我根据Google文档实现了OverlayView的子类： https://developers.google.com/maps/documentation/javascript/customoverlays

编写自定义OverlayView.prototype.onAdd功能时，需要指定要将覆盖图附加到哪个窗格。我只是复制了代码而没有真正阅读周围的解释。

在他们的代码中，他们将叠加层附加到overlayLayer窗格：

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

但是你可以使用许多不同的MapPanes：

“MapPanes类型的窗格集合，指定不同图层的堆叠顺序地图。以下窗格是可能的，并按照从下到上堆叠的顺序进行枚举：“

MapPanes.mapPane（级别0）
MapPanes.overlayLayer（第1级）
MapPanes.markerLayer（第2级）
MapPanes.overlayMouseTarget（Level 3）
MapPanes.floatPane（第4级）

我希望叠加层悬停在地图上的所有其他信息上，因此我使用了floatPane窗格并解决了问题。

所以，而不是：

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

你用这个：

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

Answer 3

为了能够使用mapLabel类的paneType，我从google实用程序库（https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303）向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',
    });

谢谢！

Answer 4

对于overLay图层，将z-index设置为104似乎是“神奇”数字“如果您关心与标记交互（即拖动标记）。任何高于104且您无法与标记交互。如果有一个不那么脆弱的解决方案...

Answer 5

使用panes.overlayMouseTarget.appendChild

如果您希望通过鼠标点击来定位图层（并使用“click”或CSS pseudo :: hover等事件），则应使用overlayMouseTarget

var panes = this.getPanes（）;

panes.overlayMouseTarget.appendChild（this.div _）;

另见： https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapPanes

Answer 6

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

对于那些寻求快速而肮脏的解决方案的人，此CSS为我工作：

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

使用后果自负！

谷歌地图版本3中的z-Index覆盖

6 个答案: