谷歌地图在 UI 和标记上方添加覆盖层答案

【问题标题】：google maps adding overlay layer above UI and markers谷歌地图在 UI 和标记上方添加覆盖层
【发布时间】：2013-08-16 03:24:14
【问题描述】：

我有一个带有多个标记的谷歌地图的网站。每个标记代表一个节日的事件。由于信息太大而无法放入信息窗口，因此我决定使用自定义叠加层。到目前为止，取得了部分成功。下面是我的图像。如您所见，叠加层位于标记下方。 我的目标是覆盖在标记和 UI 之上。

下面是我的代码示例，

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（atm 有 4000 个标记），但它不起作用。也许值得注意的是，每个标记 id 都有自己的 z-index。（fe 标记 id = 1 具有 z-index = 1，标记 id = 2 具有 z-index = 2，标记 id = 3 具有 z-index = 3，等等）

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

谢谢。

【问题讨论】：

标签： javascript google-maps-api-3 overlay

【解决方案1】：

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

在draw方法中，

// 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});
}

这就是放置和删除叠加层的全部内容。 :-)

【讨论】：