Google Maps API v3'te yalnızca bir InfoWindow açık olsun

Google Haritamda yalnızca bir InfoWindow'un açık olması gerekiyor. Yeni bir tane açmadan önce diğer tüm InfoWindows'u kapatmam gerekiyor.

Biri bana bunun nasıl yapılacağını gösterebilir mi?

Tek bir InfoWindownesne oluşturmanız , ona bir referans tutmanız ve tüm işaretçiler için eğer yeniden kullanmanız gerekir. Google Maps API Dokümanlarından Alıntı :

Aynı anda yalnızca bir bilgi penceresinin görüntülenmesini istiyorsanız (Google Haritalar'daki davranış gibi), harita olayları (kullanıcı tıklamaları gibi) üzerine farklı konumlara veya işaretleyicilere yeniden atayabileceğiniz yalnızca bir bilgi penceresi oluşturmanız gerekir.

Bu nedenle, InfoWindowharitanızı başlattıktan hemen sonra nesneyi oluşturmak ve ardından clickişaretçilerinizin olay işleyicilerini aşağıdaki gibi işlemek isteyebilirsiniz . Diyelim ki adında bir işaretiniz var someMarker:

google.maps.event.addListener(someMarker, 'click', function() {
   infowindow.setContent('Hello World');
   infowindow.open(map, this);
});

Ardından, yöntemi InfoWindowçağırmanıza gerek kalmadan yeni bir işaretleyiciye tıkladığınızda otomatik olarak kapanmalıdır close().

Bilgi pencerenizi, paylaşabilmek için kapsamın dışında oluşturun.

İşte basit bir örnek:

var markers = [AnArrayOfMarkers];
var infowindow = new google.maps.InfoWindow();

for (var i = 0, marker; marker = markers[i]; i++) {
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent('Marker position: ' + this.getPosition());
    infowindow.open(map, this);
  });
}

Aynı sorunu yaşadım ama en iyi cevap onu tamamen çözmedi, for ifademde yapmam gereken, bunu mevcut işaretçimle ilgili olarak kullanmaktı. Belki bu birine yardımcı olur.

for(var i = 0; i < markers.length; i++){
    name = markers[i].getAttribute("name");
    address = markers[i].getAttribute("address");        
    point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));                                     
    contentString = '<div style="font-family: Lucida Grande, Arial, sans-serif;>'+'<div><b>'+ name +'</b></div>'+'<div>'+ address +'</div>';                    
    marker = new google.maps.Marker({                       
        map: map,
        position: point,
        title: name+" "+address,
        buborek: contentString 
    });                                     
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(this.buborek); 
        infowindow.open(map,this); 
    });                                                         
    marker.setMap(map);                 
}

biraz geciktim, ancak küresel bir değişken içerisine girerek sadece bir bilgi penceresini açmayı başardım.

var infowindow = new google.maps.InfoWindow({});

sonra listenin içinde

infowindow.close();
infowindow = new google.maps.InfoWindow({   
    content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered                           
});

infowindow.open(map, this);

Bir globar bildirin var selectedInfoWindow;ve açık bilgi penceresini tutmak için kullanın:

var infoWindow = new google.maps.InfoWindow({
    content: content
});

// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
    //Check if there some info window selected and if is opened then close it
    if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
        selectedInfoWindow.close();
        //If the clicked window is the selected window, deselect it and return
        if (selectedInfoWindow == infoWindow) {
            selectedInfoWindow = null;
            return;
        }
    }
    //If arrive here, that mean you should open the new info window 
    //because is different from the selected
    selectedInfoWindow = infoWindow;
    selectedInfoWindow.open(map, marker);
});

Yeni bir işaretçi üzerinde tıklama olayını işlediğinizde önceki InfoWindow nesnenizi takip etmeniz ve bu nesnede kapatma yöntemini çağırmanız gerekir .

NB Paylaşılan bilgi penceresi nesnesinde close çağrısı yapmak gerekli değildir, farklı bir işaretleyici ile open çağrısı orijinali otomatik olarak kapatacaktır. Ayrıntılar için Daniel'in cevabına bakın.

Temel olarak, bir new InfoBox()=> onclick olayına atıfta bulunan bir işlev istersiniz . İşaretçilerinizi oluştururken (bir döngüde) kullanınbindInfoBox(xhr, map, marker);

// @param(project): xhr : data for infoBox template
// @param(map): object : google.maps.map
// @param(marker): object : google.maps.marker
bindInfoBox: (function () {
    var options = $.extend({}, cfg.infoBoxOptions, { pixelOffset: new google.maps.Size(-450, -30) }),
        infoBox = new window.InfoBox(options);

    return function (project, map, marker) {
        var tpl = renderTemplate(project, cfg.infoBoxTpl); // similar to Mustache, Handlebars

        google.maps.event.addListener(marker, 'click', function () {
            infoBox.setContent(tpl);
            infoBox.open(map, marker);
        });
    };
}())

var infoBoxzaman uyumsuz olarak atanır ve bellekte tutulur. Her bindInfoBox()aradığınızda bunun yerine return işlevi çağrılacaktır. Geçmek için de kullanışlıdırinfoBoxOptionsSadece bir kez !

Örneğimde, mapbaşlatmam sekme olayları nedeniyle geciktiğinden , ek bir parametre eklemek zorunda kaldım .

InfoBoxOptions

Yeniden kullanmak için yalnızca bir infoWindow oluşturması gerekmeyen bir çözüm burada. Birçok infoWindows oluşturmaya devam edebilirsiniz, ihtiyacınız olan tek şey bir closeAllInfoWindows işlevi oluşturmak ve yeni bir bilgi penceresi açmadan önce onu çağırmaktır. Dolayısıyla, kodunuzu saklayarak yapmanız gereken tek şey:

1. Tüm infoWindows'u depolamak için global bir dizi oluşturun

   var infoWindows = [];
   

2. Her yeni infoWindow'u dizide, infoWindow = new ... 'den hemen sonra depolayın.

   infoWindows.push(infoWindow);
   

3. CloseAllInfoWindows işlevini oluşturun

   function closeAllInfoWindows() {
       for (var i=0;i<infoWindows.length;i++) {
           infoWindows[i].close();
       }
   }
   

4. Kodunuzda, infoWindow'u açmadan hemen önce closeAllInfoWindows () öğesini çağırın.

Saygılarımızla,

Bunu şu şekilde çözdüm:

function window(content){
    google.maps.event.addListener(marker,'click', (function(){
        infowindow.close();
        infowindow = new google.maps.InfoWindow({
            content: content
        });
        infowindow.open(map, this);
    }))
}
window(contentHtml);

Google Haritalar, yalnızca bir bilgi penceresine sahip olmanıza izin verir. Yani yeni bir pencere açarsanız diğeri otomatik olarak kapanır.