javascript - 在 Google Maps API V3 中仅显示一个 InfoBubble

Question

我以前使用过 InfoWindow。它正在工作，即使我单击许多标记，它也仅限于显示一个信息窗口。

但是当我更改它并将其替换为 InfoBubble 时，它​​会显示多个气泡。它不会自动关闭之前打开的气泡，而是保持打开状态，而且它们似乎弄乱了我的 map 。

我不知道如何解决这个问题。这是我的代码。

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