Закрыть открытый инфо-пузырь при открытии нового (gMap v3)

Не знаю что делать... просто хочу закрыть все открытое infoBubbles если я собираюсь открыть новый. Я использую следующий код. Идеи? Я много пробовал и много гуглил, но не должно быть так сложно, не так ли? Я думал создать массив и сохранить идентификатор для открытого, но я думаю, что должен быть другой, более простой способ исправить это.

$(document).ready(function(){
            createmap();

    function createmap(lat,lng){
        var latlng = new google.maps.LatLng(50, 10);
    var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
    bounds = new google.maps.LatLngBounds();
            createMarker();
    }

    function createMarker(){
            var markers = [];
            var cm = window.cm = new ClusterManager(
                map,
                {
                    objClusterIcon: new google.maps.MarkerImage('images/map/flag_cluster.png', false, false, false, new google.maps.Size(20,20)),
                    objClusterImageSize: new google.maps.Size(20,20)
                }
            );

            var json = [];
            var x1 = -85;
            var x2 = 85;
            var y1 = -180;
            var y2 = 180;
            for (var i=0; i<20; ++i) {
                json.push(
                    '{'+
                        '"longitude":'+(x1+(Math.random()*(x2-x1)))+','+
                        '"latitude":'+(y1+(Math.random()*(y2-y1)))+','+

                        '"title":"test"'+
                    '}'
                );
            }
            json = '['+json.join()+']';
            // eval is ok here.
            eval('json = eval(json);');

            infos = [];
            $.each(json, function(i,item){      
    var contentString = '<div id="content"><a onclick="createdetailpage('+i+');">'+item.title+'<br /></a></div>';

                console.log(item.latitude);
                var myLatlng = new google.maps.LatLng(item.latitude,item.longitude);
            var marker = new google.maps.Marker({
                    position: myLatlng, 
                    //map: map, 
                    flat: true,
                    title:item.title,
                    //animation: google.maps.Animation.DROP,
                    //icon: myIcon
                });  
                var infoBubble = new InfoBubble({               
                    content: '<div class="phoneytext">'+contentString+'</div>'
                });                                

                google.maps.event.addListener(marker, 'click', function() {
                    if (!infoBubble.isOpen()) {
                        infoBubble.open(map, marker);
                    }
                }); 
                cm.addMarker(marker, new google.maps.Size(50, 50));                 
            });
        map.fitBounds(bounds);              
    }
    });

2 ответа

Решение

Самый простой подход к открытию только одного информационного пузыря состоит в том, чтобы иметь только один информационный пузырь и открывать его с различным содержимым в зависимости от того, на каком маркере щелкнули.

Пример InfoWindow с пользовательскими маркерами (та же концепция применима к InfoBubble)

InfoBubble является OverlayView, Насколько я вижу, overlaycomplete событие генерируется при добавлении оверлея. Может быть, все ваши InfoBubbles может прослушать это событие и закрыть, если добавленное наложение отличается от "this".

Это всего лишь мысль, я сам не пробовал. Обратная связь приветствуется, если вы попробуете это!

Другие вопросы по тегам