Есть только один InfoWindow открыт в Google Maps API v3

Мне нужно открыть только одно информационное окно на моей карте Google. Мне нужно закрыть все остальные InfoWindows, прежде чем я открою новый.

может кто-то показать мне, как это сделать?

81
google-maps google-maps-api-3 javascript

10 ответов

вам нужно создать только один InfoWindow объект, сохраните ссылку на него и повторно используйте if для всех маркеров. цитирование из Google Maps API Docs:

если вы хотите, чтобы одновременно отображалось только одно информационное окно (как это происходит на картах Google), вам нужно создать только одно информационное окно, которое вы можете переназначить в разные места или маркеры при событиях карты (например, клики пользователя).

поэтому, вы можете просто хотеть создать InfoWindow объект сразу после инициализации карты, а затем обрабатывать click обработчики событий ваших маркеров следующим образом. Допустим, у вас есть маркер под названием someMarker:

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

тут InfoWindow должна автоматически закрываться при нажатии на маркер без вызова close() метод.

144

создайте свой infowindow из области, чтобы вы могли поделиться им.

вот простой пример:

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

У меня была та же проблема, но лучший ответ не решил ее полностью, что я должен был сделать в своем заявлении for, используя this, относящееся к моему текущему маркеру. Может, это кому-то поможет.

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

немного поздно, но мне удалось открыть только одно infowindow, сделав infowindow глобальной переменной. 

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

затем внутри listner

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

infowindow.open(map, this);
3

объявить глобар var selectedInfoWindow; и используйте его для удержания открытого информационного окна:

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

вам нужно отслеживать Ваши предыдущие InfoWindow объект , а вызов закрыть метод на нем, когда вы обрабатываете событие click на новом маркере.

Н. Б нет необходимости вызывать close на объекте окна shared info, вызов open с другим маркером автоматически закроет оригинал. См.Дэниел для сведения.

0

в основном вы хотите одну функцию, которая сохраняет ссылку на один new InfoBox() => делегировать событие onclick. При создании маркеров (в цикле) используйте bindInfoBox(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 infoBox назначено асинхронно и хранится в памяти. Каждый раз, когда вы звоните bindInfoBox() вместо этого будет вызвана функция return. Также удобно передать infoBoxOptions только один раз!

в моем примере мне пришлось добавить дополнительный параметр к map поскольку моя инициализация задерживается вкладкой события.

InfoBoxOptions

0

вот решение, которое не нужно создавать только одно infoWindow для его повторного использования. Вы можете продолжать создавать много infoWindows, единственное, что вам нужно, это создать функцию closeAllInfoWindows и вызвать ее перед открытием нового infowindow. Итак, сохраняя свой код, вам просто нужно:

  1. создать глобальный массив для хранения всех infoWindows

    var infoWindows = [];

  2. хранить каждый новый infoWindow в массиве, сразу после infoWindow = новый...

    infoWindows.push(infoWindow);

  3. создайте функцию closeAllInfoWindows

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

  4. в вашем коде вызовите closeAllInfoWindows () непосредственно перед открытием infoWindow.

С уважением,

0

решил это так:

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

Google Maps позволяет открыть только одно информационное окно. Поэтому, если вы открываете новое окно, то другое автоматически закрывается.

-4