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

  });

编辑：添加完整标记点击群集 我觉得附件必须在for循环中完成，否则范围不正确。

我已经完成了很多关于与群集器相关的信息的阅读，但我觉得这是一个简单的问题，我很乐意从别人那里获得一些见解。谢谢你的帮助！

Answer 1

经过一番黑客攻击后。我甚至不知道是否可以用这种方式附加DomListeners。解决它。因为我无法在信息框的html框中使用任何角度语法。对于每个标记簇，我为内容创建了一个A元素。将其设置为阻止然后隐藏所有链接元素以使其看起来像正常一样。我手动将href指向我试图导航到的视图，并使用我保存的ID属性来完成路径。它工作在离子内部，但它是一个粗糙的黑客。我想发布我是如何设法绕过它的，但对于其他可能正在寻找的人来说。

Google Maps Marker Clusterer：嵌套点击处理

1 个答案: