Javascript 谷歌地图：自动关闭打开的信息窗口？

，我正在使用谷歌地图API v3在地图上放置房屋标记

除非您明确单击“关闭”图标，否则信息窗口将保持打开状态。也就是说，如果将鼠标悬停在地图标记上，一次可以打开2个以上的信息窗口

问题：如何使其仅打开当前活动的信息窗口，而关闭所有其他信息窗口？也就是说，一次打开的信息窗口不超过1个？

来自此链接：

张：最简单的方法就是 只要有一个例子 重复使用的InfoWindow对象 一次又一次。这样当你 单击一个新标记，信息窗口将打开 从它当前所在的位置“移动”， 指向新的标记

使用其setContent方法加载它 内容正确

有一个用于InfoWindows的函数。只需跟踪上次打开的窗口，并在创建新窗口时对其调用close函数

//assuming you have a map called 'map'
var infowindow = new google.maps.InfoWindow();

var latlng1 = new google.maps.LatLng(0,0);
var marker1 = new google.maps.Marker({position:latlng1, map:map});
google.maps.event.addListener(marker1, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #1');//update the content for this marker
        infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
    }
);
var latlng2 = new google.maps.LatLng(10,10);
var marker2 = new google.maps.Marker({position:latlng2, map:map});
google.maps.event.addListener(marker2, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #2');//update the content for this marker
        infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
    }
);

---

这会将信息窗口“移动”到每个单击的标记处，实际上是将其自身关闭，然后在其新位置重新打开（并平移以适应视口）。它会在打开之前更改其内容以获得所需的效果。适用于n个标记。

使用多个信息窗口的替代解决方案：

var map;
var infowindow;
...
function createMarker(...) {
    var marker = new google.maps.Marker({...});
    google.maps.event.addListener(marker, 'click', function() {
        ...
        if (infowindow) {
            infowindow.close();
        };
        infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 300
        });
        infowindow.open(map, marker);
    }
...
function initialize() {
    ...
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    ...
    google.maps.event.addListener(map, 'click', function(event) {
        if (infowindow) {
            infowindow.close();
        };
        ...
    }
}

将上一个打开的信息窗口保存在变量中，然后在新窗口打开时将其关闭

var prev_infowindow =false; 
...
base.attachInfo = function(marker, i){
    var infowindow = new google.maps.InfoWindow({
        content: 'yourmarkerinfocontent'
    });

    google.maps.event.addListener(marker, 'click', function(){
        if( prev_infowindow ) {
           prev_infowindow.close();
        }

        prev_infowindow = infowindow;
        infowindow.open(base.map, marker);
    });
}

---

除了使用close（）函数，还有一种更简单的方法。如果使用InfoWindow属性创建变量，则当您打开另一个变量时，该变量将自动关闭

var info_window;
var map;
var chicago = new google.maps.LatLng(33.84659, -84.35686);

function initialize() {
    var mapOptions = {
        center: chicago,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    info_window = new google.maps.InfoWindow({
        content: 'loading'
    )};

createLocationOnMap('Location Name 1', new google.maps.LatLng(33.84659, -84.35686), '<p><strong>Location Name 1</strong><br/>Address 1</p>');
createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '<p><strong>Location Name 1</strong><br/>Address 2</p>');

}

function createLocationOnMap(titulo, posicao, conteudo) {            
    var m = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        title: titulo,
        position: posicao,
        html: conteudo
    });            

    google.maps.event.addListener(m, 'click', function () {                
        info_window.setContent(this.html);
        info_window.open(map, this);
    });
}

var信息窗口；
var映射；
var chicago=newgoogle.maps.LatLng（33.84659，-84.35686）；
函数初始化（）{
变量映射选项={
中心：芝加哥，
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map_canvas”），mapOptions）；
info_window=新建google.maps.InfoWindow({
内容：“正在加载”
)};
createLocationOnMap（“地点名称1”，新的google.maps.LatLng（33.84659，-84.35686），”地点名称1
地址1
）；
createLocationOnMap（“地点名称2”，新的google.maps.LatLng（33.84625，-84.36212），”地点名称1
地址2
）；
}
函数createLocationMap（titulo、posicao、conteudo）{
var m=新的google.maps.Marker({
地图：地图，
动画：google.maps.animation.DROP，
标题：提图洛，
职位：国际民航组织，
html:conteudo
});            
google.maps.event.addListener（m，'click'，函数（）{
info_window.setContent（this.html）；
信息窗口。打开（地图，此）；
});
}

那么-

google.maps.event.addListener(yourMarker, 'mouseover', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

google.maps.event.addListener(yourMarker, 'mouseout', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

---

然后你可以把鼠标悬停在它上面，它就会自动关闭

我在顶部存储了一个变量，以跟踪当前打开的信息窗口，请参见下文

var currentInfoWin = null;
google.maps.event.addListener(markers[counter], 'click', function() {      
    if (currentInfoWin !== null) {
        currentInfoWin.close(map, this); 
    }
    this.infoWin.open(map, this); 
    currentInfoWin = this.infoWin;  
}); 

我的解决方案

var map;
var infowindow = new google.maps.InfoWindow();
...
function createMarker(...) {
var marker = new google.maps.Marker({
     ...,
     descrip: infowindowHtmlContent  
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setOptions({
        content: this.descrip,
        maxWidth:300
    });
    infowindow.open(map, marker);
});

为活动窗口声明变量

并在标记侦听器中绑定此代码

---

如果您在for循环中使用许多标记（这里是Django），那么下面就是我使用的方法。可以在每个标记上设置索引，并在每次打开窗口时设置该索引。关闭以前保存的索引：

markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
            content: contentString,
          });
var marker = new google.maps.Marker({
               position: {lat: {{ obj.lat }}, lng: {{ obj.lon }}},
               map: map,
               title: '{{ obj.name }}',
               infoWindowIndex : {{ forloop.counter0 }}
          });
google.maps.event.addListener(marker, 'click',
            function(event)
            {
           if( prev_infowindow ) {
               infoWindows[prev_infowindow].close();
                }
                prev_infowindow = this.infoWindowIndex;
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infowindow);
        markers.push(marker);

      {% endfor %}

---

---

我认为这不适用，因为我使用的是Google Maps v3 APIPlus，您链接的文章也没有演示超过1个markerI，我已经在多个站点上以相同的方式使用了单个信息窗口。单击一个，打开的窗口将自动关闭。如何将多个标记与单个信息窗口关联？对于我来说，最好只创建一个信息窗口并更新它（它的内容等），打开和关闭以及所有内容。但我很确定这种方法并不总是适用的；窗口不需要先关闭。@Eric，虽然你在技术上是正确的，但我注意到一个错误，它有时会导致信息窗口显示在其最后位置。bug说，强制关闭第一个窗口会失败。Up投票赞成只跟踪最后一个打开的窗口的建议。看起来很简单，但人们忘记了这些事情…我只是使用了完全相同的技术。谢谢你，克里斯。这对我来说是必要的，因为我使用的是InfoWindow对象数组，而不仅仅是一个循环并获取相关信息的数组。每个信息窗口都有各自独立的更新信息，所以我发现这项技术非常有用。Thanx，我需要在没有单击标记时关闭信息窗口，所以只需在地图上像这样。很容易理解和实现请原谅我的幼稚，但WTF是基础？我不明白为什么它不是Google maps V3中的默认行为…迄今为止我找到的最好、最简单的解决方案。非常感谢。这真的很优雅-只需使用一个信息窗口并更改内容，就可以避免跟踪/关闭上一个窗口。此解决方案确实非常优雅，工作起来很有魅力+1谢谢，当点击地图上的任何地方时，它确实有效。干杯，伙计，在所有的建议中，这对我来说是最好的，而且是干净的AF。这是一个有趣的解决方法，但它不回答问题，也不适用于触摸设备。这里的[计数器]在做什么？

var activeInfoWindow; 

 marker.addListener('click', function () {
    if (activeInfoWindow) { activeInfoWindow.close();}
    infowindow.open(map, marker);
    activeInfoWindow = infowindow;
});

markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
            content: contentString,
          });
var marker = new google.maps.Marker({
               position: {lat: {{ obj.lat }}, lng: {{ obj.lon }}},
               map: map,
               title: '{{ obj.name }}',
               infoWindowIndex : {{ forloop.counter0 }}
          });
google.maps.event.addListener(marker, 'click',
            function(event)
            {
           if( prev_infowindow ) {
               infoWindows[prev_infowindow].close();
                }
                prev_infowindow = this.infoWindowIndex;
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infowindow);
        markers.push(marker);

      {% endfor %}