google maps close infoBox

Мне нужно закрыть infoBox, когда откроется другой. Я видел много потоков об этом, и я пробовал все, что я читал, и не повезло.

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

Вот мой текущий JS:

var infobox;

function createMap(mapDataTrending, mapDataRestaurants, mapDataBars) {
        //circles for 4sq Trending data
        var cityCircle, cityCircle2, cityCircle3, infobox, infobox2, infobox3;  

        for (var i = 0; i < mapDataTrending.length; i++) { 
            contentString = '
' + mapDataTrending[i].name + '

'; contentString += '
' + mapDataTrending[i].address; contentString += '
' + mapDataTrending[i].count + " ARE HERE"; infobox = new InfoBox({ content: contentString, //content: document.getElementById("infobox"), disableAutoPan: false, maxWidth: 150, pixelOffset: new google.maps.Size(-140, 6), zIndex: null, boxClass: "infoTrending", boxStyle: { width: "200px" }, closeBoxMargin: "1px", closeBoxURL: "img/close-btn.png", infoBoxClearance: new google.maps.Size(1, 1) }); var markerIcon = [ "img/marker-icon-1.png", "img/marker-icon-2.png", "img/marker-icon-3.png", "img/marker-icon-4.png", "img/marker-icon-5.png", "img/marker-icon-6.png", "img/marker-icon-7.png", "img/marker-icon-8.png", "img/marker-icon-9.png", "img/marker-icon-10.png" ]; var image = new google.maps.MarkerImage( markerIcon[i], //This marker is 129 pixels wide by 42 pixels tall. new google.maps.Size(18, 18), //The origin for this image is 0,0. new google.maps.Point(0,0), //The anchor for this image is the base of the flagpole at 18,42. new google.maps.Point(9, 9) ); var marker = new google.maps.Marker({ position: new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng), anchor: new google.maps.Point(0,32), icon: image, map: map }); bindInfoW(marker, contentString, infobox); } function bindInfoW(marker, contentString, infobox){ google.maps.event.addListener(marker, 'click', function() { if(infobox){ infobox.close(); } infobox.setContent(contentString); infobox.open(map, marker); google.maps.event.addListener(map, 'click', function() { if(infobox){ infobox.close(); } }); }); }
1
nl ja de

1 ответы

Вместо того, чтобы создавать несколько экземпляров InfoBox es в цикле mapDataTrending , создайте экземпляр одного глобально с пустым контентом . Затем вы можете вывести локальные переменные infobox , а обработчики будут использовать глобальную ссылку.

Ваш скрипт должен выглядеть следующим образом:

var infobox = new InfoBox({
     content: '',
     disableAutoPan: false,
     maxWidth: 150,
     pixelOffset: new google.maps.Size(-140, 6),
     zIndex: null,
     boxClass: "infoTrending",
     boxStyle: {
        width: "200px"
    },
    closeBoxMargin: "1px",
    closeBoxURL: "img/close-btn.png",
    infoBoxClearance: new google.maps.Size(1, 1)
});

function createMap(mapDataTrending, mapDataRestaurants, mapDataBars) {
    //circles for 4sq Trending data
    var cityCircle, cityCircle2, cityCircle3;  

    for (var i = 0; i < mapDataTrending.length; i++) { 
        contentString = '
' + mapDataTrending[i].name + '

'; contentString += '
' + mapDataTrending[i].address; contentString += '
' + mapDataTrending[i].count + " ARE HERE"; var markerIcon = [ "img/marker-icon-1.png", "img/marker-icon-2.png", "img/marker-icon-3.png", "img/marker-icon-4.png", "img/marker-icon-5.png", "img/marker-icon-6.png", "img/marker-icon-7.png", "img/marker-icon-8.png", "img/marker-icon-9.png", "img/marker-icon-10.png" ]; var image = new google.maps.MarkerImage( markerIcon[i], //This marker is 129 pixels wide by 42 pixels tall. new google.maps.Size(18, 18), //The origin for this image is 0,0. new google.maps.Point(0,0), //The anchor for this image is the base of the flagpole at 18,42. new google.maps.Point(9, 9) ); var marker = new google.maps.Marker({ position: new google.maps.LatLng(mapDataTrending[i].lat, mapDataTrending[i].lng), anchor: new google.maps.Point(0,32), icon: image, map: map }); bindInfoW(marker, contentString); } function bindInfoW(marker, contentString){ google.maps.event.addListener(marker, 'click', function() { if(infobox){ infobox.close(); } infobox.setContent(contentString); infobox.open(map, marker); }); }

Я также удалил второй обработчик click , который привязывался к каждому клику, поскольку он является избыточным и негерметичным, если у вас нет никаких маркеров, которые не связаны с bindInfoW .

4
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda