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

Google Maps: Auto close open InfoWindows?

提问by Ted

On my site, I'm using Google Maps API v3 to place house markers on the map.

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

The InfoWindows stay open unless you explicitly click the close icon. Meaning, you can have 2+ InfoWindows open at a time if you hover over the map marker.

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

Question: How do I make it so that only the current active InfoWindow is open and all other InfoWindows are closed? Meaning, no more than 1 InfoWindow will be open at a time?

问题：如何使只有当前活动的 InfoWindow 打开而所有其他 InfoWindow 关闭？意思是，一次不会打开超过 1 个 InfoWindow？

回答by Chris B

There is a close()function for InfoWindows. Just keep track of the last opened window, and call the close function on it when a new window is created.

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

This demohas the functionality you're looking for. I found it in the Maps API V3 demo gallery.

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

回答by mike

alternative solution for this with using many infowindows: save prev opened infowindow in a variable and then close it when new window opened

使用许多信息窗口解决此问题的替代解决方案：将上一个打开的信息窗口保存在变量中，然后在新窗口打开时关闭它

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

回答by Joel Mellon

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

This will "move" the info window around to each clicked marker, in effect closing itself, then reopening (and panning to fit the viewport) in its new location. It changes its contents before opening to give the desired effect. Works for n markers.

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

回答by kaidoj

My solution.

我的解决方案。

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

回答by Keith Adler

From this link http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/:

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

Teo: The easiest way to do this is to just have one instance of the InfoWindow object that you reuse over and over again. That way when you click a new marker the infoWindow is “moved” from where it's currently at, to point at the new marker.

Use its setContent method to load it with the correct content.

Teo：最简单的方法是只拥有一个 InfoWindow 对象的实例，您可以一遍又一遍地重复使用。这样，当您单击新标记时，信息窗口会从它当前所在的位置“移动”，指向新标记。

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

回答by Hardeep Singh

Declare a variable for active window

为活动窗口声明一个变量

var activeInfoWindow; 

and bind this code in marker listener

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

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

回答by MelloG

There is a easier way besides using the close() function. if you create a variable with the InfoWindow property it closes automatically when you open another.

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

回答by Nathan

How about -

怎么样 -

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

    });

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

    });

Then you can just hover over it and it will close itself.

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

回答by P Nelson

I stored a variable at the top to keep track of which info window is currently open, see below.

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

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

回答by D K

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