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

时间:2013-08-14 08:57:08

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

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

enter image description here

以下是我的代码示例

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的顶部,则更容易捕获单击事件以移除叠加层,而不是操纵地图和地图对象。

谢谢。

1 个答案:

答案 0 :(得分:2)

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

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

enter image description here