单张标记自定义图标-图标大小

Question

我希望标记是包含自定义图像的圆圈，这些图像可能有所不同。所以我在添加标记时就这样做了：

var marker_radius = 25;
refactored_markers.forEach(element => {
    var marker = L.marker(
        element[1], 
        {
            icon: L.icon({
                iconUrl: '/cdp/' + element[0][0],
                
                iconSize: [marker_radius * 2, marker_radius * 2],
                iconAnchor: [marker_radius, marker_radius],
                popupAnchor: [-3, marker_radius]
            })
        }).addTo(map);
    marker.bindPopup(L.popup().setContent("<p>" + element[0] + "</p>")) // only for testing
    markers.push(marker);
});

也在我定义的CSS文件中：

:root {
    --marker-size: 50px;
    --marker-radius: calc(var(--marker-width) / 2);
}

img.leaflet-marker-icon.leaflet-zoom-animated.leaflet-interactive {
    max-width: var(--marker-size) !important;
    max-height: var(--marker-size) !important;
    border: 2px solid #212529 !important;
    border-radius: var(--marker-radius) !important;
}

问题在于仅实现了图像URL和边框。其余的将被忽略。因此，图标的大小和位置以及边框半径都不正确。因此在我的地图上有5个标记。现在每个人都有一张覆盖整个地图的高分辨率图像。

边注：我不能只使用较小的图像，因为我不是管理图像的人。我只能引用它们。

使用默认标记的地图：

我尝试添加自定义标记的地图：