把谷歌地图信息窗口向前(Bring GoogleMaps InfoWindow to front)

2019-07-18 06:10发布

我有一个谷歌地图应用程序APIv3其中多个信息窗口可以在任何时间打开。 我希望能够把一个模糊的信息窗口的所有其他信息窗口的前面,如果点击任何部分 - 类似于Windows的MS中的Windows操作系统的行为。

我曾想过要添加一个onclick事件处理程序,这增加了信息窗口的z指数,但该事件处理程序似乎不被解雇。 Z-索引是一个全局变量在不断增加的信息窗口被点击 - 或者反正这就是理论。

任何人都可以帮忙吗? 这里是我的代码: -

var ZIndex=1;
var iw = new google.maps.InfoWindow({ content:contentString });
google.maps.event.addListener(iw, 'click', handleInfoWindowClick(iw) );

function handleInfoWindowClick(infoWindow) {
   return function() {
      infoWindow.setZIndex(ZIndex++);
   }
}

Answer 1:

没有点击事件的信息窗口,这是一个稍微有点难度了。

  1. 你需要使用一个元素(而不是字符串)作为信息窗口的内容,因为你需要一个DOMListener而不是一个监听信息窗口对象
  2. 当domready中,火灾,必须应用点击DOMListener此内容节点的anchestor定义信息窗口

下面的代码会为你做这个,添加到您的网页:

google.maps.InfoWindowZ=function(opts){
          var GM = google.maps,
              GE = GM.event,
              iw = new GM.InfoWindow(),
              ce;

             if(!GM.InfoWindowZZ){
                GM.InfoWindowZZ=Number(GM.Marker.MAX_ZINDEX);
             }

             GE.addListener(iw,'content_changed',function(){
               if(typeof this.getContent()=='string'){
                  var n=document.createElement('div');
                      n.innerHTML=this.getContent();
                      this.setContent(n);
                      return;
               }
               GE.addListener(this,'domready',
                               function(){
                                var _this=this;
                                _this.setZIndex(++GM.InfoWindowZZ);
                                if(ce){
                                  GM.event.removeListener(ce);
                                }
                                ce=GE.addDomListener(this.getContent().parentNode
                                                  .parentNode.parentNode,'click',
                                                  function(){
                                                  _this.setZIndex(++GM.InfoWindowZZ);
                                });
                              })
             });

             if(opts)iw.setOptions(opts);
             return iw;
        }

取而代之的google.maps.InfoWindow()现在必须调用google.maps.InfoWindowZ()

它也返回一个真正的信息窗口,但随着提到监听应用到它。 在需要的时候它还会创建从内容的节点。

演示: http://jsfiddle.net/doktormolle/tRwnE/


更新版本visualRefresh(使用鼠标悬停,而不是点击) http://jsfiddle.net/doktormolle/uuLBb/



文章来源: Bring GoogleMaps InfoWindow to front