Leaflet：标记图标和 markerCluster 一起显示在 map 上，带 fetch

Question

我在我的项目中使用 Leaflet。 我与 PHP / Symfony 合作，我通过 fetch 从 Controller 中检索数据，以显示 Z1D78AEB7C8ED4FE2414E 上的标记

所有标记都显示在 map 上，但是当使用 markerCluster 时，在 map 上具有接近坐标的标记（例如：同一城市）不会在群集中组合在一起。 彼此相距较远的标记很好地组合在一起。 你知道为什么吗？ 谢谢

我正在为您添加屏幕，以便您更好地理解:)

map.js

let iconPicture = L.icon({
  iconUrl: "/assets/images/cycling.png",
  iconSize: [20, 20],
  popupAnchor: [0, -10],
});

function initMap() {
  var map = L.map("mapId").setView([48.833, 2.333], 12);

  var osmLayer = L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
    attribution: "© OpenStreetMap contributors",
    minZoom: 3,
    maxZoom: 19,
  });

  var markersGroup = L.markerClusterGroup({
    disableClusteringAtZoom: 13,
    spiderfyOnMaxZoom: false,
    removeOutsideVisibleBounds: true,
  });

  fetch("/api/map")
    .then((response) => {
      return response.json();
    })
    .then((result) => {
      result.forEach((element) => {
        var cluster = L.marker([element.latitude, element.longitude], {
          icon: iconPicture,
        })
          // Nous ajoutons la popup. A noter que son contenu peut être du HTMl
          .bindPopup(
            function (layer) {
              return (
                "<span>" +
                element.name +
                "</span>" +
                "<br>" +
                "<div class='img-hover-zoom'>" +
                "<a href=" +
                "/collection50_60/" +
                element.id +
                ">" +
                "<img class='picturePopup' src=/assets/images/uploads/" +
                element.pictureFront +
                ">" +
                "</a>" +
                "</div>" +
                "<br>" +
                element.city +
                "<br>" +
                "<a href=" +
                "/collection50_60" +
                ">" +
                element.years +
                "</a>"
              );
            },
            { className: "pop-up-leaflet", direction: "top" } //then add your options
          )
          .addTo(map);
        markersGroup.addLayer(cluster);
      });
      map.addLayer(markersGroup);
    })
    .catch(() => console.error("error"));
}
window.onload = function () {
  initMap();
};

Answer 1

那只是因为您将标记（变量cluster ）添加到 map 和 MarkerClusterGroup。

只需将它们仅添加到 MCG 并让后者处理所有事情。

var cluster = L.marker(latLng, options)
  .bindPopup()
  //.addTo(map); <= do not add your Marker directly to the map
markersGroup.addLayer(cluster); // <= let the MCG handle everything