在Google Maps API V3中僅顯示一個InfoBubble

Question

我以前使用InfoWindow。它正在工作，並且僅限於顯示一個InfoWindow，即使我點擊了多個標記。

但是當我改變它並用InfoBubble替換它時，它顯示了多個氣泡。它不會自動關閉之前打開的泡泡，而是保持開放狀態，並且他們似乎在搞亂我的地圖。

我不知道如何處理這個問題。這是我的代碼。

 downloadUrl("outputXML.php", function(data) 
     { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 
      for (var i = 0; i < markers.length; i++) 
      { 
       var name = markers[i].getAttribute("name"); 
       var address = markers[i].getAttribute("address"); 
       var type = markers[i].getAttribute("type"); 
       var point = new google.maps.LatLng(
         parseFloat(markers[i].getAttribute("lat")), 
         parseFloat(markers[i].getAttribute("lng"))); 
       var html = "<div class='phoneytext'> <b>" + name + "</b> <br/>" + address + "</div>"; 
       var icon = customIcons[type] || {}; 
       var marker = new google.maps.Marker 
       ({ 
        map: map, 
        position: point, 
        icon: icon.icon, 
        title:name 
       }); 

       //Initiate an infoBubble - shows when a marker is tapped/clicked 
       infoBubble = new InfoBubble 
       ({ 
        map: map, 
        shadowStyle: 1, 
        padding: 0, 
        backgroundColor: 'rgb(57,57,57)', 
        borderRadius: 4, 
        arrowSize: 10, 
        borderWidth: 1, 
        borderColor: '#2c2c2c', 
        disableAutoPan: true, 
        arrowPosition: 30, 
        backgroundClassName: 'phoney', 
        arrowStyle: 2 
       });     
       bindInfoBubble(marker, map, infoBubble, html); 

      } 
     });    

     function bindInfoBubble(marker, map, infoBubble, html) 
     { 
      google.maps.event.addListener(marker, 'click', function() 
      { 
       infoBubble.setContent(html); 
       infoBubble.open(map, marker); 
      }); 
     } 

Answer 1

您可以實現Singleton概念：

downloadUrl("outputXML.php", function(data) 
    { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     for (var i = 0; i < markers.length; i++) 
     { 
      var name = markers[i].getAttribute("name"); 
      var address = markers[i].getAttribute("address"); 
      var type = markers[i].getAttribute("type"); 
      var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")), 
        parseFloat(markers[i].getAttribute("lng"))); 
      var html = "<div class='phoneytext'> <b>" + name + "</b> <br/>" + address + "</div>"; 
      var icon = customIcons[type] || {}; 
      var marker = new google.maps.Marker 
      ({ 
       map: map, 
       position: point, 
       icon: icon.icon, 
       title:name 
      }); 

      bindInfoBubble(marker, map, html); 

     } 
    }); 

    var InfoBubbleClass = (function(){ 
     var instance = null; 
     return { 
      getInstance:function(){ 
       if(instance===null){ 
        instance = new InfoBubble 
        ({ 
         map: map, 
         shadowStyle: 1, 
         padding: 0, 
         backgroundColor: 'rgb(57,57,57)', 
         borderRadius: 4, 
         arrowSize: 10, 
         borderWidth: 1, 
         borderColor: '#2c2c2c', 
         disableAutoPan: true, 
         arrowPosition: 30, 
         backgroundClassName: 'phoney', 
         arrowStyle: 2 
        });     
       } 
       return instance; 
      } 
     }; 
    })();    

    function bindInfoBubble(marker, map, html) 
    { 
     google.maps.event.addListener(marker, 'click', function() 
     { 
      InfoBubbleClass.getInstance().setContent(html); 
      InfoBubbleClass.getInstance().open(map, marker); 
     }); 
    }