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

Question

我正试图在谷歌地图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.

有任何想法吗？

..fredrik

Answer 1

如果有人遇到和我一样的问题,这是我的问题和解决方案:

我需要一个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 2

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

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