Programmiererforum

Ich mache eine Seite, um auf der ganzen Welt öffentliche Klaviere zu durchsuchen. Um darauf hinzuweisen, wo sich die Klaviere befinden und welche Bedingung sie in IM verwenden, verwenden sie Blättchenmarker mit unterschiedlichen Farben. Mein Problem ist, dass es an einigen Stellen Klaviere gibt, die sehr nah und an einigen Stellen überlappen, aber an anderen Orten nicht. ¿Warum passiert das und wie kann ich es beheben? src = "https://i.sstatic.net/fmydmh6t.png" /> < /p>

Was ich tue, um die Marker zu zeigen, um einen Abruf zu verwenden, um die Informationen von einem JSON: < /p>
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/ ... shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
}) })
.addTo(map)
.bindPopup(
`${piano.lugar}
ID(${piano.id})


${piano.descripcion}
Open in google mapsLast update: ${piano.comprobacion}`
);
});
})
.catch(error => {
console.error("Error cargando pianos.json:", error);
});

Ich dachte, wenn Sie 2 Macher zusammen platzieren, war der letzte Marker, den Sie platzieren>