谷歌地圖InfoBox和ajax調用導致多個呈現

Question

在我如何實現InfoBox時遇到問題，並且想知道是否有人對可能的解決方案有所瞭解。

目前我有〜1000個客戶端標記，它們都被動態添加到頁面中。他們正在使用以下內容生成。

var cir = new google.maps.Marker({ 
      position: new google.maps.LatLng(l.lat, l.lng), 
      map: map, 
      icon: icons[l.type].simple 
     }); 
     addClickHandlerAjax(cir, l); 
     l.m = cir; 

addClickHandlerAjax方法是點擊標記時調用的方法。這是這種方法的基礎。

function addClickHandlerAjax(marker, l) { 

    google.maps.event.addListener(marker, "click", function() { 

     if(theInfoWindow){ 
     theInfoWindow.close(); 
     // InfoWindow = null; 
     } 
     //get content via ajax 
     $.ajax({ 
      url: 'map/getInfo', 
      type: 'get', 
      data: { 
       'ID': l.f 
      }, 
      success: function (data, status) { 
       if (status == "success") { 
        //create infowindow here.. 
          theInfoWindow= new InfoBox({ 
          content: document.getElementById("infobox-wrapper-hotel"), 
          disableAutoPan: true, 
          enableEventPropagation: true, 
          closeBoxURL: '../assets/images/info-close.png', 
         }); 
         theInfoWindow.open(map, marker); 
         touchScroll('rab-scroll'); 

       }); 
       } 
      }, 
      error: function (xhr, desc, err) { 
       console.log(xhr); 
       console.log("Details: " + desc + "\nError:" + err); 
      } 
     }); // end ajax call 
    }); 
} 

問題在於用戶非常快速地點擊多個標記。之前標記的信息框可以保持打開狀態。但它可能不包含任何內容。

有誰知道如何通過安全關閉信息框的所有實例來正確處理多個信息框？

我沒有看到這種行爲在此實現Jsfiddle

Answer 1

最簡單的解決辦法：如果你只想要一個信息框同時打開，在全球範圍內創造一個，並使用所有的標記。您提到的小提琴確實（var ib = new InfoBox();是單個全球信息框）。

爲了解決這個漫長的響應時間，改變你的Ajax處理考慮到這一點（只關閉現有信息窗口時的回調函數成功）：

function addClickHandlerAjax(marker, l) { 

    google.maps.event.addListener(marker, "click", function() { 

     //get content via ajax 
     $.ajax({ 
      url: 'map/getInfo', 
      type: 'get', 
      data: { 
       'ID': l.f 
      }, 
      success: function (data, status) { 
       if (status == "success") { 
       // close the existing infowindow only if the AJAX response succeeds 
       if(theInfoWindow){ 
        theInfoWindow.close(); 
       } 
       // remove the existing infowindow from the map if the AJAX response succeeds      
       if (theInfoWindow.setMap) theInfoWindow.setMap(null); 
       //create a new infowindow here, with the returned content.. 
       theInfoWindow= new InfoBox({ 
        content: document.getElementById("infobox-wrapper-hotel"), 
        disableAutoPan: true, 
        enableEventPropagation: true, 
        closeBoxURL: '../assets/images/info-close.png', 
       }); 
       theInfoWindow.open(map, marker); 
       touchScroll('rab-scroll'); 
       }); 
      } 
      }, 
      error: function (xhr, desc, err) { 
       console.log(xhr); 
       console.log("Details: " + desc + "\nError:" + err); 
      } 
     }); // end ajax call 
    }); 
}