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

Posted 2023-02-23

【中文标题】谷歌地图：自动关闭打开 InfoWindows？

【英文标题】：Google Maps: Auto close open InfoWindows?

【发布时间】：2011-01-14 11:30:35

【问题描述】：

On my site，我正在使用 Google Maps API v3 在地图上放置房屋标记。

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

问题：如何才能使只有当前活动的 InfoWindow 处于打开状态，而所有其他 InfoWindow 都关闭？意思是，一次打开的信息窗口不超过 1 个？

【问题讨论】：

对我来说，最好只创建 一个 信息窗口并更新它（它的内容等），打开和关闭等等。但我很确定这种方法并不总是适用。

【参考方案1】：

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

【讨论】：

赞成仅跟踪最后打开的窗口的建议。看起来很简单，但人们忘记了那些事情......

我刚刚使用了完全相同的技术。谢谢克里斯。这对我来说是必要的，因为我使用的是一组 InfoWindow 对象，而不仅仅是一个循环并获取相关信息的对象。每个 InfoWindow 都有自己独立的更新信息，所以我发现这种技术非常有用。

【参考方案2】：

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

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

【讨论】：

喜欢这个。易于理解和实施

原谅我的天真，但WTF是基础？

我不明白为什么这不是谷歌地图 V3 中的默认行为 ...

迄今为止我发现的最佳和最简单的解决方案。谢谢！

【参考方案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 个标记。

【讨论】：

快速说明：重复调用 infowindow.open() 就足够了；不需要先关闭窗口。

@Eric，虽然您在技术上是正确的，但我注意到有时会导致信息窗口显示在最后一个位置的错误。强制关闭首先会击败上述错误。

【参考方案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);
);

【讨论】：

这真的很优雅 - 仅使用单个信息窗口并更改内容避免必须跟踪/关闭前一个。

这个解决方案确实非常优雅，而且效果很好。 +1

【参考方案5】：

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

Teo：最简单的方法是 只有一个实例 您重用的 InfoWindow 对象 一遍又一遍。这样当你 单击 infoWindow 所在的新标记 从当前位置“移动”， 指向新的标记。

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

【讨论】：

我认为这不适用，因为我使用的是 Google Maps v3 API

另外，您链接的文章也没有演示超过 1 个标记

我已经以相同的方式为多个站点使用了一个信息窗口。点击一个，打开的会自动关闭。

如何将多个标记与单个信息窗口关联？

【参考方案6】：

为活动窗口声明一个变量

var activeInfoWindow; 

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

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

【讨论】：

谢谢，当点击地图上的任何地方时，它真的很有效。

干杯老兄，在所有的建议中，这对我来说效果最好，而且是干净的 AF。

【参考方案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);
    );

【参考方案8】：

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

【讨论】：

谢谢，我需要在没有点击标记时关闭信息窗口，所以就在地图上

【参考方案9】：

怎么样——

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

    );

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

    );

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

【讨论】：

这是一个有趣的解决方法，但它不能回答问题，并且不适用于仅触控设备。

【参考方案10】：

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

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

【讨论】：

[counter] 在这里做什么？

【参考方案11】：

如果您在 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 %

【参考方案12】：

var contentString = "Location: " + results[1].formatted_address;    
google.maps.event.addListener(marker,'click', (function() 
    infowindow.close();
    infowindow = new google.maps.InfoWindow(
        content: contentString
    );
    infowindow.open(map, marker);
));