在谷歌地圖中只打開一個 InfoWindow API v3

Question

我只需要在我的 Google Map 上打開一個 InfoWindow。在打開一個新的 InfoWindow 之前，我需要關閉所有其他 InfoWindow。

有人可以告訴我該怎么做嗎？

Answer 1

您只需要創建一個InfoWindow對象，保留對它的引用，並為所有標記重用 if。 引自 Google Maps API Docs ：

如果您只想一次顯示一個信息窗口（就像 Google 地圖上的行為一樣），您只需要創建一個信息窗口，您可以根據地圖事件（例如用戶點擊）將其重新分配到不同的位置或標記。

因此，您可能只想在初始化地圖后立即創建InfoWindow對象，然后按如下方式處理標記的click事件處理程序。 假設您有一個名為someMarker的標記：

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

然后，當您單擊新標記時， InfoWindow應自動關閉，而無需調用close()方法。

Answer 2

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

這是一個簡單的例子：

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

Answer 3

我有同樣的問題，但最好的答案並沒有完全解決它，我在 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);                 
}

Answer 4

有點晚了，但我設法通過將 infowindow 設為全局變量只打開了一個信息窗口。

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

然后在監聽器里面

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

infowindow.open(map, this);

Answer 5

聲明一個全局變量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);
});

Answer 6

您需要跟蹤之前的InfoWindow對象， 並在處理新標記上的 click 事件時調用其上的 close方法 。

NB沒有必要在共享信息窗口對象上調用 close ，使用不同的標記調用 open 將自動關閉原始。 有關詳細信息，請參閱Daniel 的回答。

Answer 7

基本上你想要一個函數來保持對一個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() ，都會調用返回函數。 只傳遞一次infoBoxOptions也很方便！

在我的示例中，我不得不向map添加一個額外的參數，因為我的初始化被選項卡事件延遲了。

信息框選項

Answer 8

這是一種不需要僅創建一個 infoWindow 即可重用它的解決方案。 您可以繼續創建許多 infoWindows，您唯一需要做的就是構建一個 closeAllInfoWindows 函數，並在打開新的 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()。

問候，

Answer 9

使用 jQuery 執行此操作的一種智能簡單方法如下：

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

它將單擊工具提示中的所有關閉按鈕。

Answer 10

我的方法也允許您切換信息窗口。

全球空間

var infoWindow = new google.maps.InfoWindow();
infoWindow.setContent(contentString);

var lastInfoWindow;

局部空間

marker.addListener("click", (e) => {
  if (lastInfoWindow === e.domEvent.srcElement) {
    infoWindow.close();
    lastInfoWindow = null;
  } else {
    infoWindow.open({
      anchor: marker,
      map,
      shouldFocus: false,
    });
    lastInfoWindow = e.domEvent.srcElement;
  }
});

Answer 11

是這樣解決的：

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

Answer 12

Google 地圖允許您只打開一個信息窗口。 因此，如果您打開一個新窗口，另一個窗口會自動關閉。