外部元素在群集标记上的传单触发事件

Question

我刚刚开始了解 Leaflet.js 我即将开展的项目。

我想要完成的事情： 我需要制作一个显示在地图上的标记列表，当列表项悬停时 （或鼠标悬停） 它会显示地图上的位置（对于单个标记，它应该改变它的颜色。对于集群标记，它应该显示覆盖线 就像我们悬停它时它的行为一样..如果可能的话也可能改变它的颜色）。地图和缩放级别都不应该改变，简单地说，我需要在地图上突出显示标记/集群。

我现在完成的事情:我可以在Single Marker上完成.

我非常沮丧的事情:我没能找到在Clustered Marker[上实现它的方法=47=].

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

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

但我不知道哪个对象或属性可以获取 Clustered Marker 参考。我通过全局变量 （仅适用于单个标记）.
触发标记事件
... 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" }); ...

这是我目前的 https://jsfiddle.net/oryza_anggara/2gze75L6/，任何线索都可能提供很大的帮助。谢谢。

注意：我唯一熟悉的js库是JQuery，我对其他的一无所知，比如Angular.js

Answer 1

您可能正在寻找 markers.getVisibleParent(marker) 方法，以在您的标记被聚类时检索包含的聚类。

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

function _fireEventOnMarkerOrVisibleParentCluster(marker, eventName) {
  var visibleLayer = markers.getVisibleParent(marker);

  if (visibleLayer instanceof L.MarkerCluster) {
    // In case the marker is hidden in a cluster, have the clusterGroup
    // show the regular coverage polygon.
    markers.fire(eventName, {
      layer: visibleLayer
    });
  } else {
    marker.fire(eventName);
  }
}

var marker = markersRef[this.getAttribute('marker')];
_fireEventOnMarkerOrVisibleParentCluster(marker, 'mouseover');

已更新 JSFiddle：https://jsfiddle.net/2gze75L6/5/

话虽如此，我认为另一个有趣的 UI 不是显示 "manually" 悬停集群时得到的常规覆盖多边形，而是 spiderfy 群集并突出显示您的标记。实施起来不是很容易，但结果对我来说似乎不错。这是一个快速尝试，它可能需要更多的工作才能使其防弹：

演示：https://jsfiddle.net/2gze75L6/6/

function _fireEventOnMarkerOrVisibleParentCluster(marker, eventName) {
  if (eventName === 'mouseover') {
    var visibleLayer = markers.getVisibleParent(marker);

    if (visibleLayer instanceof L.MarkerCluster) {
      // We want to show a marker that is currently hidden in a cluster.
      // Make sure it will get highlighted once revealed.
      markers.once('spiderfied', function() {
        marker.fire(eventName);
      });
      // Now spiderfy its containing cluster to reveal it.
      // This will automatically unspiderfy other clusters.
      visibleLayer.spiderfy();
    } else {
      // The marker is already visible, unspiderfy other clusters if
      // they do not contain the marker.
      _unspiderfyPreviousClusterIfNotParentOf(marker);
      marker.fire(eventName);
    }
  } else {
    // For mouseout, marker should be unclustered already, unless
    // the next mouseover happened before?
    marker.fire(eventName);
  }
}

function _unspiderfyPreviousClusterIfNotParentOf(marker) {
  // Check if there is a currently spiderfied cluster.
  // If so and it does not contain the marker, unspiderfy it.
  var spiderfiedCluster = markers._spiderfied;

  if (
    spiderfiedCluster
    && !_clusterContainsMarker(spiderfiedCluster, marker)
  ) {
    spiderfiedCluster.unspiderfy();
  }
}

function _clusterContainsMarker(cluster, marker) {
  var currentLayer = marker;

  while (currentLayer && currentLayer !== cluster) {
    currentLayer = currentLayer.__parent;
  }

  // Say if we found a cluster or nothing.
  return !!currentLayer;
}

外部元素在群集标记上的传单触发事件

Leaflet Trigger Event on Clustered Marker by external element

leaflet

leaflet.markercluster