3

我有一个网站，上面有一个充满多个标记的谷歌地图。每个标记代表一个节日的事件。由于信息太大而无法放入信息窗口，因此我决定使用自定义叠加层。到目前为止，取得了部分成功。下面是我的图像。如您所见，叠加层位于标记下方。我的目标是覆盖在标记和 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 （有 4000 个标记 atm ）但它不起作用。也许值得注意的是，每个标记 id 都有自己的 z-index。（fe 标记 id = 1 具有 z-index = 1，标记 id = 2 具有 z-index = 2，标记 id = 3 具有 z-index = 3，等等）

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

谢谢你。

4

1 回答 1

3

对于也有兴趣解决此问题的其他人，我找到了一个简单的解决方法，我正在使用标记上方的 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});
}

这就是放置和移除覆盖层的全部内容。:-)

在此处输入图像描述

于 2013-08-14T11:57:26.303 回答