将GoogleMaps InfoWindow放在前面 [英] Bring GoogleMaps InfoWindow to front

问题描述

我有一个可以在任何时候打开多个InfoWindows的GoogleMaps APIv3应用程序。我希望能够将一个模糊的InfoWindow带到所有其他InfoWindows的前端，如果它的任何部分被点击 - 类似于MS Windows OS中的窗口的行为。

我曾想过添加一个onclick事件处理函数，它增加了InfoWindow的z-index，但事件处理程序似乎没有被触发。
ZIndex是一个全局变量，随着InfoWindows被点击而不断增加 - 或者说理论无论如何。

任何人都可以帮忙吗？
这里是我的代码： - $ /

$ $ p $ $ code var ZIndex = 1;
var iw = new google.maps.InfoWindow（{content：contentString}）;
google.maps.event.addListener（iw，'click'，handleInfoWindowClick（iw））;

函数handleInfoWindowClick（infoWindow）{
return function（）{
infoWindow.setZIndex（ZIndex ++）;
}
}

解决方案

there没有clickWindow的事件，这有点困难。

1. 你需要使用一个元素（而不是一个字符串）作为infowindow的内容，因为当domready-fires时，您需要一个DOMListener而不是一个监听器来代替infowindow对象


2. ，您必须将click-DOMListener应用于此内容的管理员 - 定义infowindow的节点

以下代码将为您做到这一点，将其添加到您的页面：

  google.maps.InfoWindowZ =函数（opts）{
 var GM = google.maps，
 GE = GM.event，
 iw = new GM.InfoWindow（），
 ce; $！
 $ b if（！GM.InfoWindowZZ）{
 GM.InfoWindowZZ = Number（GM.Marker.MAX_ZINDEX）; 
 
 $ b $ 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）; 
}）; 
}）
}）; （opts）iw.setOptions（opts）; 
 
 if（opts） 
 return iw; 
 
  

而不是 google.maps.InfoWindow（）您必须现在调用 google.maps.InfoWindowZ（）

InfoWindow，但是应用了所提到的监听器。它还会在需要时从内容创建节点。

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

---

更新版本的visualRefresh（使用鼠标悬停，而不是点击） http://jsfiddle.net/doktormolle/uuLBb /

I have a GoogleMaps APIv3 application in which multiple InfoWindows can be open at any one time. I would like to be able to bring an obscured InfoWindow to the front of all other InfoWindows if any part of it is clicked - similar to the behaviour of windows in MS Windows OS.

I had thought to add an onclick event handler which increases the z-index of the InfoWindow, but the event handler does not appear to be firing. ZIndex is a global variable that keeps increasing as InfoWindows are clicked - or thats the theory anyway.

Can anyone help ? Here is my code:-

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

解决方案

there is no click-event for an infoWindow, it's a little bit more difficult.

1. you'll need to use an element(not a string) as content for the infowindow, because you need a DOMListener instead a listener for the infowindow-object
2. when domready-fires, you must apply the click-DOMListener to the anchestor of this content-node that defines the infowindow

The following code will do this for you, add this to your page:

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

Instead of google.maps.InfoWindow() you must call now google.maps.InfoWindowZ()

It also returns a genuine InfoWindow, but with the mentioned listener applied to it. It also creates the node from the content when needed.

Demo: http://jsfiddle.net/doktormolle/tRwnE/

---

Updated version for visualRefresh(using mouseover instead of click) http://jsfiddle.net/doktormolle/uuLBb/

这篇关于将GoogleMaps InfoWindow放在前面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！