Как сделать мои индивидуальные маркеры SVG в листовке, не двигаются во время масштабирования ⇐ Javascript

[Anonymous]

Я пытаюсь создать пользовательские маркеры SVG, используя L.Svgoverlay в листочке. Маркеры реализованы как элементы svg . Они работают правильно, когда я увеличиваю и выходу: они остаются на правильных географических позициях. Однако, если я панирует (переместить) карту, а затем увеличить, маркеры соходят без ума. Я не могу выяснить, что я делаю не так.







html, body {
height: 100%;
margin: 0;
font-family: Arial;
}

#map {
height: 100vh;
width: 100vw;
}

.villageMarker {
pointer-events: auto !important;
cursor: pointer;
}






function updateSvgPositionsZoom() {
const mapBounds = map.getBounds();
svgOverlay.setBounds(mapBounds);

const svgOverlayElement = svgOverlay.getElement();

Array.from(svgOverlayElement.children).forEach(icon => {
const i = icon.id.split("_")[1];
const coords = coordinates;

const point = map.latLngToLayerPoint(coords);

icon.setAttribute('transform', `translate(${point.x},${point.y})`);
});
};

async function show() {
for (const i in iconWrappers) {
const coords = coordinates;
const iconWrapper = iconWrappers;

const circle = document.createElementNS(ns, "circle");
circle.setAttribute('r', 10);
circle.setAttribute('fill', '#fc43ab');
circle.setAttribute('stroke', '#000000');
circle.setAttribute('stroke-width', '1');

iconWrapper.appendChild(circle)

const point = map.latLngToLayerPoint(coords);
iconWrapper.setAttribute('transform', `translate(${point.x},${point.y})`);
};
};

async function main() {
map = L.map('map', {center: [52.38, 9.77], zoom: 6});

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);

svg = document.createElementNS(ns, "svg");
svg.style.pointerEvents = 'none';

for (const i in coordinates) {
const iconWrapper = document.createElementNS(ns, "g");
iconWrapper.setAttribute('id', `marker_${i}`);
iconWrapper.classList.add('villageMarker');

svg.appendChild(iconWrapper);
iconWrappers.push(iconWrapper);
};

svgOverlay = L.svgOverlay(svg, map.getBounds(), {
interactive: true,
opacity: 1
}).addTo(map);

svgOverlay.getElement().setAttribute('xmlns', ns);

map.on('zoomend', updateSvgPositionsZoom);

show();
};

let pathname;

let map;
let ns = "http://www.w3.org/2000/svg";
let svgOverlay;
let svg;

let coordinates = [
[52.38, 9.77],
[51.52, 7.47],
[53.56, 9.97]
]

let iconWrappers = [];

main();


< /code>
< /div>
< /div>
< /p>
Чего мне не хватает, чтобы маркеры стали стабильными как во время панорамирования, так и во увеличении? Должен ли я справиться с различными событиями или в моей конверсии координат есть фундаментальная ошибка?

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