Javascript 在 Google Maps API v3 中只打开一个 InfoWindow

Have just one InfoWindow open in Google Maps API v3

提问by leo

I need to have only one InfoWindow open on my Google Map. I need to close all other InfoWindows before I open a new one.

我只需要在我的 Google 地图上打开一个 InfoWindow。在打开一个新的 InfoWindows 之前，我需要关闭所有其他 InfoWindows。

Can someone show me how to do this?

有人可以告诉我如何做到这一点吗？

回答by Daniel Vassallo

You need to create just one InfoWindowobject, keep a reference to it, and reuse if for all the markers. Quoting from the Google Maps API Docs:

您只需要创建一个InfoWindow对象，保留对它的引用，并为所有标记重用 if。引自 Google Maps API Docs：

If you only want one info window to display at a time (as is the behavior on Google Maps), you need only create one info window, which you can reassign to different locations or markers upon map events (such as user clicks).

如果您只想一次显示一个信息窗口（就像 Google 地图上的行为一样），您只需要创建一个信息窗口，您可以根据地图事件（例如用户点击）将其重新分配到不同的位置或标记。

Therefore, you may simply want to create the InfoWindowobject just after you initialize your map, and then handle the clickevent handlers of your markers as follows. Let's say you have a marker called someMarker:

因此，您可能InfoWindow只想在初始化地图后立即创建对象，然后click按如下方式处理标记的事件处理程序。假设您有一个名为 的标记someMarker：

google.maps.event.addListener(someMarker, 'click', function() {
   infowindow.setContent('Hello World');
   infowindow.open(map, this);
});

Then the InfoWindowshould automatically close when you click on a new marker without having to call the close()method.

然后，InfoWindow当您单击新标记时，它应该会自动关闭，而无需调用该close()方法。

回答by skarE

Create your infowindow out of the scope so that you can share it.

在范围之外创建您的信息窗口，以便您可以共享它。

Here is a simple example:

这是一个简单的例子：

var markers = [AnArrayOfMarkers];
var infowindow = new google.maps.InfoWindow();

for (var i = 0, marker; marker = markers[i]; i++) {
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent('Marker position: ' + this.getPosition());
    infowindow.open(map, this);
  });
}

回答by Ferenc Takacs

I had the same problem but the best answer didn't solve it completely, what I had to do in my for statement was using the this relating to my current marker. Maybe this helps someone.

我有同样的问题，但最好的答案并没有完全解决它，我在 for 语句中必须做的是使用与我当前标记相关的 this 。也许这对某人有帮助。

for(var i = 0; i < markers.length; i++){
    name = markers[i].getAttribute("name");
    address = markers[i].getAttribute("address");        
    point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));                                     
    contentString = '<div style="font-family: Lucida Grande, Arial, sans-serif;>'+'<div><b>'+ name +'</b></div>'+'<div>'+ address +'</div>';                    
    marker = new google.maps.Marker({                       
        map: map,
        position: point,
        title: name+" "+address,
        buborek: contentString 
    });                                     
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(this.buborek); 
        infowindow.open(map,this); 
    });                                                         
    marker.setMap(map);                 
}

回答by user2827958

a tad late, but I managed to have only one infowindow open by maken infowindow a global variable.

有点晚了，但我设法通过将 infowindow 设为全局变量只打开了一个信息窗口。

var infowindow = new google.maps.InfoWindow({});

then inside the listner

然后在监听器里面

infowindow.close();
infowindow = new google.maps.InfoWindow({   
    content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered                           
});

infowindow.open(map, this);

回答by IgniteCoders

Declare a globar var selectedInfoWindow;and use it to hold the opened info window:

声明一个全局变量var selectedInfoWindow;并使用它来保存打开的信息窗口：

var infoWindow = new google.maps.InfoWindow({
    content: content
});

// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
    //Check if there some info window selected and if is opened then close it
    if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
        selectedInfoWindow.close();
        //If the clicked window is the selected window, deselect it and return
        if (selectedInfoWindow == infoWindow) {
            selectedInfoWindow = null;
            return;
        }
    }
    //If arrive here, that mean you should open the new info window 
    //because is different from the selected
    selectedInfoWindow = infoWindow;
    selectedInfoWindow.open(map, marker);
});

回答by Tim Vermaelen

Basically you want one function that keeps reference to one new InfoBox()=> delegate the onclick event. While creating your markers (in a loop) use bindInfoBox(xhr, map, marker);

基本上，您需要一个函数来保持对一个的引用new InfoBox()=> 委托 onclick 事件。在创建标记（在循环中）时使用bindInfoBox(xhr, map, marker);

// @param(project): xhr : data for infoBox template
// @param(map): object : google.maps.map
// @param(marker): object : google.maps.marker
bindInfoBox: (function () {
    var options = $.extend({}, cfg.infoBoxOptions, { pixelOffset: new google.maps.Size(-450, -30) }),
        infoBox = new window.InfoBox(options);

    return function (project, map, marker) {
        var tpl = renderTemplate(project, cfg.infoBoxTpl); // similar to Mustache, Handlebars

        google.maps.event.addListener(marker, 'click', function () {
            infoBox.setContent(tpl);
            infoBox.open(map, marker);
        });
    };
}())

var infoBoxis assigned asynchronously and kept in memory. Every time you call bindInfoBox()the return function will be called instead. Also handy to pass the infoBoxOptionsonly once!

var infoBox被异步分配并保存在内存中。每次调用bindInfoBox()返回函数都会被调用。还得心应手的infoBoxOptions只传一次！

In my example I've had to add an extra param to the mapas my initialization is delayed by tab events.

在我的示例中，我不得不向 中添加一个额外的参数，map因为我的初始化被选项卡事件延迟了。

InfoBoxOptions

信息框选项

回答by RedBlueThing

You need to keep track of your previous InfoWindowobject and call the closemethod on it when you handle the click event on a new marker.

您需要跟踪之前的InfoWindow对象，并在处理新标记上的 click 事件时调用其上的close方法。

N.BIt is not necessary to call close on the shared info window object, calling open with a different marker will automatically close the original. See Daniel's answerfor details.

NB没有必要在共享信息窗口对象上调用 close ，使用不同的标记调用 open 将自动关闭原始。有关详细信息，请参阅Daniel 的回答。

回答by Jortx

Here is a solution that doesn't need to create only one infoWindow to reuse it. You can continue creating many infoWindows, the only thing you need is to build a closeAllInfoWindows function, and call it before open a new infowindow. So, keeping your code, you just need to:

这是一种不需要仅创建一个 infoWindow 即可重用它的解决方案。您可以继续创建许多 infoWindows，您唯一需要做的就是构建一个 closeAllInfoWindows 函数，并在打开新的 infowindow 之前调用它。因此，保留您的代码，您只需要：

1. Create a global array to store all the infoWindows

   var infoWindows = [];
   

2. Store each new infoWindow in the array, just after the infoWindow = new...

   infoWindows.push(infoWindow);
   

3. Create the closeAllInfoWindows function

   function closeAllInfoWindows() {
       for (var i=0;i<infoWindows.length;i++) {
           infoWindows[i].close();
       }
   }
   

4. In your code, call to closeAllInfoWindows() just before open the infoWindow.

1. 创建一个全局数组来存储所有的 infoWindows

   var infoWindows = [];
   

2. 将每个新的 infoWindow 存储在数组中，就在 infoWindow = new...

   infoWindows.push(infoWindow);
   

3. 创建 closeAllInfoWindows 函数

   function closeAllInfoWindows() {
       for (var i=0;i<infoWindows.length;i++) {
           infoWindows[i].close();
       }
   }
   

4. 在您的代码中，在打开 infoWindow 之前调用 closeAllInfoWindows()。

Regards,

问候，

回答by Bilal Boulaich

Solved it this way:

是这样解决的：

function window(content){
    google.maps.event.addListener(marker,'click', (function(){
        infowindow.close();
        infowindow = new google.maps.InfoWindow({
            content: content
        });
        infowindow.open(map, this);
    }))
}
window(contentHtml);

回答by Kimmo Puputti

Google Maps allows you to only have one info window open. So if you open a new window, then the other one closes automatically.

Google 地图允许您只打开一个信息窗口。因此，如果您打开一个新窗口，另一个窗口会自动关闭。