外部元素

Question

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

我想要完成的任务： 我需要制作一个显示在地图上的标记列表，当列表项目被悬停（或鼠标悬停）时，它将显示地图上的位置（对于单个标记，它应更改其颜色。对于群集标记，它应显示覆盖行，就像我们悬停时的行为方式一样它......也许如果可能的话也会改变它的颜色）。 地图不应该像缩放级别那样改变，简单来说，我需要在地图上突出显示标记/聚类。

我现在所取得的成就：我可以在 单一标记 上完成。

我非常沮丧的是：我未能找到一种方法来实现 群集标记 。

我使用global var对象来存储任何已创建的标记。

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 lib是 JQuery ，我对 Angular.js 等其他人不了解p>

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，而不是显示“手动”悬停群集时获得的常规覆盖多边形，将是 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;
}