谷歌地图在UI和标记之上添加叠加层

Question

我的网站上有一个填充了多个标记的谷歌地图。每个标记代表节日活动。由于信息太大而无法容纳在信息窗口中，我决定使用自定义叠加层。到目前为止，取得了部分成功。以下是我的形象。如您所见，叠加层位于标记下方。 我的目标是叠加层位于标记和用户界面之上。

以下是我的代码示例

TxtOverlay.prototype.draw = function() {
    // create info window
    var div = document.createElement("div");
    div.id = "mapOverlay";
    div.innerHTML = this.txt;
    div.style.cssText = 'background-color : #000; color: #FFF; border-radius: 15px; border-style : solid; border-width : 1px;padding: 10px; z-index: 9999; display: block; width: 460px; height: 460px; opacity: 0.4;';

    // get projection
    var map = this.map;
    var overlayProjection = this.getProjection(); 
    var anchor = overlayProjection.fromLatLngToDivPixel(this.pos);
    div.style.position = "absolute";
    div.style.left = (anchor.x - 240) + 'px';
    div.style.top = (anchor.y - 240)+ 'px';

    // bind created div to object var
    this.div = div;
    // add to map
    var panes = this.getPanes();
    panes.overlayLayer.appendChild(div);

    console.log("prototype draw");
}

我已经使用z-index到9999（有4000个标记atm）但它不起作用。也许值得注意的是，每个标记id都有自己的z-index。 （fe marker id = 1有z-index = 1，marker id = 2有z-index = 2，marker id = 3有z-index = 3，等等）

如果叠加层位于标记和UI的顶部，则更容易捕获单击事件以移除叠加层，而不是操纵地图和地图对象。

谢谢。

Answer 1

对于其他有兴趣解决此问题的人，我找到了一个简单的解决方法，我使用的是floatPane层，它位于标记之上。然后我删除了UI /控件，以便在没有地图交互的情况下进行叠加。

在绘制方法中，

// add to map
var panes = this.getPanes();
panes.floatPane.appendChild(div);

// add event
document.getElementById("mapOverlay").addEventListener('click', this.onRemove, false);

// disable map controls
toggleControls(false);

然后点击div时，只需创建下一个

// remove overlay
TxtOverlay.prototype.onRemove = function(e) {
    // remove listener
    var element = document.getElementById("mapOverlay");
    element.removeEventListener('click', this.onRemove, false);
    // and div
    var parent = element.parentNode;
    parent.removeChild(element);
    this._div = null;

    // return controls
    toggleControls(true);
}

和切换方法，

// toggles control ; false = no interaction, true = interaction
var toggleControls = function(bool) {
    _map.setOptions({draggable: bool, zoomControl: bool, scrollwheel: bool, disableDoubleClickZoom: !bool, scaleControl : bool, zoomControl : bool, panControl : bool});
}

这就是放置和移除叠加层的全部内容。 ： - ）