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

Question

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

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

score 155 · Accepted Answer

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

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

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

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

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

score 31 · Accepted Answer

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

这是一个简单的例子：

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

score 14 · Accepted Answer

我遇到了同样的问题，但最好的答案并没有完全解决它，我在 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);                 
}

score 5 · Accepted Answer

有点晚了，但我设法只打开了一个 infowindow 由 maken infowindow 一个全局变量。

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

然后在侦听器内部

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

infowindow.open(map, this);

score 4 · Accepted Answer

声明一个 globarvar 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);
});

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

基本上，您想要一个保持对一个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 infoBox被异步分配并保存在内存中。每次调用bindInfoBox()return 函数时都会被调用。也方便通过infoBoxOptions唯一一次！

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

信息框选项

score 0 · Accepted Answer

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

创建一个全局数组来存储所有的 infoWindows
```
var infoWindows = [];
```
将每个新的 infoWindow 存储在数组中，就在 infoWindow = new... 之后
```
infoWindows.push(infoWindow);
```

创建 closeAllInfoWindows 函数

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

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

问候，

score 0 · Accepted Answer

使用 jQuery 执行此操作的一种智能简单方法如下：

            google.maps.event.addListener(marker, 'click', function (e) {
                jQuery(".gm-ui-hover-effect").click();
                marker.info.open(map, this);
            });

它将单击工具提示中的所有关闭按钮。

score -1 · Accepted Answer

以这种方式解决它：

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

score -5 · Accepted Answer

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

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

11 回答 11

Related

Reference