根据传单中的缩放级别调整自定义标记图标大小的最佳方法是什么？答案

【问题标题】：Which is the best way to resize custom marker icons depending on zoom level in leaflet?根据传单中的缩放级别调整自定义标记图标大小的最佳方法是什么？
【发布时间】：2020-05-14 02:04:54
【问题描述】：

我需要根据传单中的缩放级别调整一些自定义标记的大小。 'zoomend' 功能仅适用于 Circles。

map.on('zoomend', function() {   
        )            
        var currentZoom = map.getZoom();
        myMarker.setRadius(currentZoom );
    });

【问题讨论】：

这能回答你的问题吗？ change size of marker in leaflet

标签： javascript leaflet

【解决方案1】：

map.on('zoomend', ...) 仍然适用于其他类型的标记，但只有 circleMarker 有 setRadius() 方法。对于其他标记，您需要一种不同的方式来更改它们的大小，例如 re-adding the marker's icon 和一个新的 iconSize 属性。查看 Marker 和 Icon 的 Leaflet 文档了解更多详情。

图标和 CircleMarkers 采用像素大小，在缩放地图时通常保持不变。如果您需要它们保持恒定的地理大小，您可能需要使用一些 conversion methods 来计算两个 lat/lng 点之间的像素数；这随纬度和缩放级别而变化。

【讨论】：

我做了重新添加的东西：

【解决方案2】：

解决方案：

var myIcon= L.Icon.extend({
        options: {
            iconUrl: 'icon.png',
            iconSize: [7.5, 7.5],
            iconAnchor: [0, 0]
        }
    });

var ic = new myIcon({iconSize: [7.5, 7.5]});
    var marker = L.marker([-15.7745457, -48.3575684], {icon: ic}).addTo(map);

map.on('zoomend', function() {
var actualZoom = map.getZoom();
var newSize = 60/((20 - actualZoom )*2);

var resizedIcon = new myIcon({iconSize: [newSize ,newSize ]});      
marker.setIcon(resizedIcon );
});

【讨论】：