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