谷歌地图:自动关闭打开InfoWindows？

Question

在我的网站上,我使用Google Maps API v3在地图上放置房屋标记.

除非您明确单击关闭图标,否则InfoWindows将保持打开状态.这意味着,如果将鼠标悬停在地图标记上,则可以一次打开2个以上的InfoWindows.

问题:如何进行此操作以便仅打开当前活动的InfoWindow并关闭所有其他InfoWindows？这意味着,一次只能打开1个InfoWindow？

Answer 1

InfoWindows 有一个close()函数.只需跟踪上次打开的窗口,并在创建新窗口时调用close函数.

此演示具有您正在寻找的功能.我在Maps API V3演示库中找到了它.

Answer 2

使用许多infowindows的替代解决方案:保存prev在变量中打开infowindow然后在新窗口打开时关闭它

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

Answer 3

//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个标记.

Answer 4

我的解决方案

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

Answer 5

从这个链接http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/:

Teo:最简单的方法是只使用一次又一次重复使用的InfoWindow对象的一个​​实例.这样,当您单击一个新标记时,infoWindow将从当前所在的位置"移动",指向新标记.

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

Answer 6

为活动窗口声明一个变量

var activeInfoWindow; 

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

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

Answer 7

除了使用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);
    });
}