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