Кластер кластеров Google Maps: обработка вложенных кликов

Question

После взлома с проблемами распространения DOM и распространения событий в течение всего дня я пришел к последнему из вопросов, с которыми я пытался справиться с использованием кластера-маркера.

В настоящее время я прикрепляю обработчик клика к элементу DOM, чтобы изменить состояние для одного инфобокса, используя этот код.

//google infobox plug in 
var boxText = document.createElement("div"); 
boxText.style.cssText = "border: 1px solid #E0E0E0; margin-top: 8px; background: white; padding: 5px; border-radius: 7px;"; 
boxText.innerHTML = contentString; 

    //when infowindow is clicked, open view... 
google.maps.event.addDomListener(boxText, 'click', (function (marker) { 
    return function() { 
    $state.go("comments", { 
     "shoutId": activeId 
    }); 
    } 
})(marker)); 

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

В функции getMarker я использую цикл for для итерации через кластер и добавляю инфобокс с замкнутым контентом внутри него. Я мог бы применить обработчик событий boxText для всего окна, но это не дало бы мне обработчик событий на каждом отдельном раздел маркерного ..

Это код, я использую внутри кластера клик обработчика событий маркеров

google.maps.event.addListener(mc, 'click', function (cluster, $event) { 

    var content = ''; 
    var clickedMarkers = cluster.getMarkers(); 
    var splitterBar = "border-bottom"; 

    for (var i = 0; i < clickedMarkers.length; i++) { 
     if (i === 0) { 
     var var_pos = clickedMarkers[i]; 
     } 


     var clickedMarkersNames = clickedMarkers[i].title; 

     var innerText = document.createElement("div"); 

     //Format the shout body 
     content += '<div id="content " class="' + splitterBar + '">' + 
     '<div id="bodyContent">' + 

     '<article id="shout' + i + '"class="">' + 
     '<p> ' + 
     clickedMarkers[i].title + 
     '</p>' + 
     '<a data-ui-sref="comments">' + 
     '<small class="grey">' + clickedMarkers[i].address + ' &#8226; ' + 
     moment.duration(Date.now() - clickedMarkers[i].time).humanize() + ' &#8226; ' + 
     clickedMarkers[i].decibels + ' dB &#8226; ' + 
     clickedMarkers[i].echoes + echoesPlural + 
     '</small>' + 
     '</a>' + 
     '</article>' + 

     '</div>' + 
     '</div>'; 

     //when infowindow is clicked, open view... 
     google.maps.event.addDomListener(innerText, 'click', (function() { 
     return function() { 
      alert("click"); 
     } 
     })()); 

    } 

    var boxText = document.createElement("div"); 
    boxText.style.cssText = "border: 1px solid #E0E0E0; margin-top: 8px; background: white; padding: 0px; border-radius: 7px; max-height: 325px; overflow-y: auto;"; 
    boxText.setAttribute("class", "animated fade"); 
    boxText.innerHTML = content; 

    var myOptions = { 
     content: boxText, 
     disableAutoPan: false, 
     maxWidth: 0, 
     pixelOffset: new google.maps.Size(-135, -40), 
     zIndex: null, 
     boxStyle: { 
     background: "", 
     opacity: 1, 
     width: "280px" 
     }, 
     closeBoxMargin: "13px 5px 5px 5px", 
     closeBoxURL: "", 
     infoBoxClearance: new google.maps.Size(1, 1), 
     isHidden: false, 
     alignBottom: true, 
     pane: "floatPane", 
     enableEventPropagation: false 
    }; 

    var ib1 = new InfoBox(myOptions); 


    if (previousInfowindow) { 
     previousInfowindow.close(); 
    } 
    previousInfowindow = ib1; 


    ib1.open(map, var_pos); 

    }); 

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

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

Answer 1

После небольшого взлома. Я даже не знаю, можно ли присоединить DomListeners таким образом. Чтобы решить эту проблему. так как я не мог использовать какой-либо угловой синтаксис внутри окна html для инфобокса. Для каждого кластера маркеров я создал элемент A для содержимого. стилизовал его, чтобы заблокировать, а затем спрятал все элементы ссылок, чтобы сделать его похожим на нормальное. Я вручную указал href на представление, к которому я пытался перейти, и использовал свойство ID, которое я сохранил для завершения маршрута. Он работает внутри ионно, но это грубый взлом. Я хотел опубликовать, как мне удалось обойти это, хотя для кого-то еще, что может выглядеть.