Google地图在UI和标记上方添加叠加层 [英] google maps adding overlay layer above UI and markers

问题描述

我有一个带有多个标记的谷歌地图的网站。每个标记代表一个节日上的事件。由于信息太大而不适合infowindow，因此我决定使用自定义覆盖。到目前为止，部分成功。下面是我的形象。如您所见，覆盖层位于标记下方。 我的目标是叠加层位于标记和UI之上。

com / FFTjD.jpgalt =

下面是我的代码示例，

  TxtOverlay.prototype.draw = function（）{
 //创建信息窗口
 var div = document.createElement（div）; 
 div.id =mapOverlay; 
 div.innerHTML = this.txt; 
 div.style.cssText ='background-color：＃000;颜色：#FFF; border-radius：15px; border-style：solid; border-width：1px; padding：10px; z-index：9999;显示：块;宽度：460px; height：460px;不透明度：0.4;'; 
 
 //获得投影
 var map = this.map; 
 var overlayProjection = this.getProjection（）; 
 var anchor = overlayProjection.fromLatLngToDivPixel（this.pos）; 
 div.style.position =绝对; 
 div.style.left =（anchor.x  -  240）+'px'; 
 div.style.top =（anchor.y  -  240）+'px'; 
 
 //将创建的div绑定到对象var 
 this.div = div; 
 //添加到地图
 var panes = this.getPanes（）; 
 panes.overlayLayer.appendChild（div）; 
 
 console.log（prototype draw）; 
} 
  

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

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

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

在绘制方法中，

  //添加到地图
 var panes = this.getPanes（）; 
 panes.floatPane.appendChild（div）; 
 
 //添加事件
 document.getElementById（mapOverlay）。addEventListener（'click'，this.onRemove，false）; 
 
 //禁用地图控件
 toggleControls（false）; 
  

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

  //删除覆盖层
 TxtOverlay.prototype.onRemove = function（e）{
 //删除监听者
 var element = document。的getElementById（ mapOverlay）; 
 element.removeEventListener（'click'，this.onRemove，false）; 
 //和div 
 var parent = element.parentNode; 
 parent.removeChild（element）; 
 this._div = null; 
 
 //返回控制
 toggleControls（true）; 
} 
  

和切换方法

  //切换控制;假=没有互动，真正=互动
变种toggleControls =函数（布尔）{
 _map.setOptions（{拖动：BOOL，zoomControl可：BOOL，滚轮：BOOL，disableDoubleClickZoom：BOOL，scaleControl：BOOL， zoomControl：bool，panControl：bool}）; 
} 
  

全部放置并移除覆盖图。 ： - ）

I have a website with a google map filled with multiple markers. Each marker stands for an event on a festival. Since the information is too big to fit in the infowindow, i have decided to use a custom overlay. So far, with partially success. Here below is my image. As you can see, the overlay is below the marker. My goal is that the overlay comes above the markers and UI.

Here below is my code sample,

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

I have used z-index to 9999 ( there are 4000 markers atm ) but it doesn't work. Maybe it's worth to note that each marker id has its own z-index. (fe marker id = 1 has z-index = 1, marker id = 2 has z-index = 2, marker id = 3 has z-index = 3, ect )

If the overlay is on the top of both markers and UI, then it's easier to catch the click event to remove the overlay instead of manipulating the map and the map-objects.

thank you.

解决方案

For others whom are also interested to solve this issue, i have found a simple workaround, i am using the floatPane layer, which is above the markers. Then i removed the UI/controls to have a working overlay without map interaction.

In the draw method,

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

then when the div got clicked, simply create the next

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

and the toggle method,

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

that's all to place and remove an overlay. :-)

这篇关于Google地图在UI和标记上方添加叠加层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！