Leaflet 外部元素聚集标记上的小叶触发事件

我刚刚开始为我即将到来的项目学习lapper.js

我正在努力实现的目标： 我需要列出地图上显示的标记，当列表项悬停（或鼠标悬停）时，它将显示地图上的位置（对于单个标记，它应该更改其颜色。对于群集标记，它应该显示覆盖线，就像我们将其悬停时它的行为一样。如果可能，还可以更改其颜色）。 地图不应该像缩放级别一样改变，简单地说，我需要在地图上突出显示标记/簇

我现在所完成的：我能够在单个标记上完成。

我非常沮丧的事情：我没能找到一种方法让它发生在集群标记上

我使用全局变量对象来存储任何创建的标记

function updateMapMarkerResult(data) {
  markers.clearLayers();
  for (var i = 0; i < data.length; i++) {
    var a = data[i];
    var myIcon = L.divIcon({
      className: 'prop-div-icon',
      html: a.Description
    });
    var marker = L.marker(new L.LatLng(a.Latitude, a.Longitude), {
      icon: myIcon
    }, {
      title: a.Name
    });
    marker.bindPopup('<div><div class="row"><h5>Name : ' + a.Name + '</h5></div><div class="row">Lat : ' + a.Latitude + '</div><div class="row">Lng : ' + a.Longitude + '</div>' + '</div>');
    marker.on('mouseover', function(e) {
      if (this._icon != null) {
        this._icon.classList.remove("prop-div-icon");
        this._icon.classList.add("prop-div-icon-shadow");
      }
    });
    marker.on('mouseout', function(e) {
      if (this._icon != null) {
        this._icon.classList.remove("prop-div-icon-shadow");
        this._icon.classList.add("prop-div-icon");
      }
    });
    markersRef[a.LocId] = marker;   // <-- Store Reference
    markers.addLayer(marker);

    updateMapListResult(a, i + 1);
  }
  map.addLayer(markers);
}

这是我目前的工作，任何线索都会给我很大的帮助。谢谢

---

注意：我唯一熟悉的js库是JQuery，我对Angular.js等其他库一无所知您可能正在寻找

标记。getVisibleParent（marker）

方法，在标记聚集的情况下检索包含的集群

不幸的是，仅在该群集上触发事件是不够的。覆盖率显示功能是在群集组上设置的，而不是在其单个群集上设置的。因此，您需要在该群集上触发事件：

函数\u FireEventOnMarker或VisibleParentCluster（标记，事件名称）{
var visibleLayer=markers.getVisibleParent（marker）；
if（L.MarkerCluster的visibleLayer实例）{
//如果标记隐藏在簇中，请使用clusterGroup
//显示规则覆盖多边形。
markers.fire（事件名称{
图层：visibleLayer
});
}否则{
marker.fire（事件名称）；
}
}
var marker=markersRef[this.getAttribute（'marker'）]；
_fireEventOnMarkerOrVisibleParentCluster（标记“鼠标悬停”）；

更新的JSFIDLE:

话虽如此，我认为这是另一个有趣的UI，而不是显示“手动”时得到的规则覆盖多边形悬停在群集上，将使群集蜘蛛化并突出显示标记。不太容易实现，但结果对我来说很好。下面是一个快速尝试，可能需要更多的工作才能使其防弹：

演示：

函数\u FireEventOnMarker或VisibleParentCluster（标记，事件名称）{
if（eventName==='mouseover'）{
var visibleLayer=markers.getVisibleParent（marker）；
if（L.MarkerCluster的visibleLayer实例）{
//我们希望显示当前隐藏在群集中的标记。
//确保它一经曝光就会突出显示。
markers.once（'spiderified'，function（）{
marker.fire（事件名称）；
});
//现在将其包含的簇蜘蛛化以显示它。
//这将自动取消对其他群集的命名。
visibleLayer.spiderfy（）；
}否则{
//该标记已可见，如果存在，则不与其他簇区分
//它们不包含标记。
_未命名的前一簇非父（标记）；
marker.fire（事件名称）；
}
}否则{
//对于mouseout，标记应该已经取消聚集，除非
//下一次鼠标滑过之前发生过？
marker.fire（事件名称）；
}
}
函数_unsideryppreviousclusterifnotparentof（marker）{
//检查当前是否存在蜘蛛网络化群集。
//如果是，且不包含标记，则取消标记。
var spiderfiedCluster=标记；
如果(
蜘蛛团
&&！\u集群容器标记器（蜘蛛集群、标记器）
) {
spiderfiedCluster.unsiderfy（）；
}
}
功能_clusterContainsMarker（群集、标记）{
var currentLayer=标记；
while（currentLayer&¤tLayer！==群集）{
currentLayer=currentLayer.\uu父级；
}
//比如说我们是否发现了集群或者什么都没有。
返回！！当前层；
}
它是有效的！当然是我要找的。而且蜘蛛侠的功能真是棒极了！我们会考虑使用它，需要考虑更多的标记。但是你真的把它钉牢了，甚至更多。谢谢，你只节省了我头痛一周的时间。
...
li.addEventListener("mouseover", function(e) {
    jQuery(this).addClass("btn-info");
    markersRef[this.getAttribute('marker')].fire('mouseover'); // --> Trigger Marker Event "mouseover"
    // TODO : Trigger ClusteredMarker Event "mouseover"
  });
...