Маркеры перекрываются в некоторых случаях, но не всегда в листочках ⇐ Javascript

[Anonymous]

Я делаю страницу для поиска публичных пианино по всему миру. Чтобы указать, где находятся пианино и в каком состоянии они используют листочные маркеры с разными цветами. Моя проблема в том, что в некоторых местах есть пианино, которые очень близки, и в некоторых местах они перекрываются, но в других местах нет. ¿Почему это происходит и как я могу это исправить?

изображение, которое показывает проблему перекрытия

изображение, которое показывает, что перекрытие не происходит в месте, где пианино также близко < /p>

, что я для того, чтобы показать маркеры. class = "lang-js prettyprint-override">

Код: Выделить всё

fetch('pianos.json')
.then(response => response.json())
.then(pianos => {
pianos.forEach(piano => {

// Crea el marcador
L.marker([piano.latitud, piano.longitud], { icon: L.icon({
iconUrl: `images/marcadores/${piano.estado}.png`,
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
}) })
.addTo(map)
.bindPopup(
`${piano.lugar}
ID(${piano.id})

[img]images/pianos/piano_${piano.id}.webp[/img]
${piano.descripcion}
[url=${piano.link}]Open in google maps[/url]Last update: ${piano.comprobacion}`
);
});
})
.catch(error => {
console.error("Error cargando pianos.json:", error);
});

Я подумал, что если вы собираете 2 производителей вместе, последний маркер, который вы размещаете, всегда был выше, чем первый, но теперь, когда я перекрываю проблемы, которые я вижу, это не всегда так.

Подробнее здесь: https://stackoverflow.com/questions/797 ... in-leaflet