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



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

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

277   10  

10 ответов:

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

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

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

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

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

создайте свой 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);
  });
}

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

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

немного поздно, но мне удалось открыть только одно 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);

объявить глобар 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);
});

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

N. B нет необходимости вызывать close для объекта общего информационного окна, вызов open с другим маркером автоматически закроет оригинал. Смотрите Дэниел для сведения.

в основном вы хотите одну функцию, которая держит ссылку на один 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() вместо этого будет вызвана функция возврата. Также удобно передать infoBoxOptions только один раз!

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

InfoBoxOptions

вот решение, которое не нужно создавать только один 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.

С уважением,

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

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 Maps позволяет вам открыть только одно информационное окно. Так что если вы открываете новое окно, то другая автоматически закрывается.

    Ничего не найдено.

Добавить ответ:
Отменить.