Google Maps Marker Clusterer：嵌套點擊處理

在我整天關注DOM和事件傳播問題後，我總結了我一直試圖用標記聚類器處理的最後一個問題。Google Maps Marker Clusterer：嵌套點擊處理

目前，我將一個點擊處理程序附加到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事件處理程序到整個窗口，但這種方法不會給我的每一個人標記部的事件處理程序..

這是我使用的標記集羣Click事件處理程序的代碼裏面

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

    });

編輯：加滿標記點擊集羣 我覺得像附件有內部的for循環，否則範圍將不正確的工作要做。

我已經完成了關於聚類器相關信息的稀少量的大量閱讀，但我覺得這是一個簡單的問題，我很想從別人那裏獲得一些見解。謝謝你的幫助！

來源

2015-05-14 astrolope

不確定爲什麼有人投票將此視爲「離題」？ – duncan

我不知道。感謝您捕捉，但.. – astrolope

其實我不知道你在做什麼。你可以說得更詳細點嗎？或者也許粘貼完整的代碼。 – jgr

經過一番黑客攻擊。我甚至不知道是否可以通過這種方式附加DomListeners。解決它。因爲我不能在信息框的html框中使用任何角度語法。對於每個標記集羣，我爲內容製作了一個A元素。將其設置爲阻止並隱藏所有鏈接元素，使其看起來像正常。我手動將href指向我試圖導航的視圖，並使用我保存的ID屬性來完成路由。它工作在離子內部，但這是一個粗糙的黑客。我想發佈我如何設法解決這個問題，儘管對於其他人可能正在尋找。

來源

2015-06-01 04:15:44 astrolope

Google Maps Marker Clusterer：嵌套點擊處理

回答

相關問題