Question

是否可以使用Leaflet ExtraMarkers（https://github.com/coryasilva/Leaflet.ExtraMarkers）并控制图标的大小？我试过了

var greenMarker = L.ExtraMarkers.icon({
                    icon: 'fa-number',
                    iconSize: '[38,95]',
                    markerColor: 'green',
                    shape: 'circle',
                    prefix: 'fa',
                    number: "99" 
                })

在iconSize上有和没有引号都无济于事。

Answer 1

如果Leaflet.ExtraMarkers不能满足您的确切需求，也许您应该考虑使用L.Icon.Glyph并提供您自己的标记图像，无论您需要什么尺寸。

Leaflet.ExtraMarkers使用图像精灵作为背景标记图像 - 这使得使用自定义精灵变得更加困难。

Answer 2

不幸的是，Leaflet.ExtraMarkers插件中的图标为images，因此您无法通过简单的代码调整其大小。

iconSize选项指的是地图上分配的div大小（特别是定位，鼠标交互等），但它不会改变视觉外观。

现在您可以更改这些图片以获得更大的版本（或通过CSS扩展它们），但不要忘记调整icon options以进行定位（iconAnchor，popupAnchor，等）。

Answer 3

所以这个问题现在已经3岁了，但我希望有人可以使用。
这也困扰着我，所以我找到了一种使用地图事件来调整图标大小的方法。我添加了三个事件监听器，一个用于zoomend，另一个用于addlayer，第三个用于dragend，每个事件监听器将图标的大小调整为我想要的大小（较小）。
代码的scale部分决定了图标的大小，而您需要使用translateX和translateY来调整位置。
希望其他人会发现这个有用：

map.on('zoomend', function(){
        var ExtraMarkers = document.getElementsByClassName("extra-marker");
        for(l=0; l< ExtraMarkers.length; l++){
        oldS = ExtraMarkers[l].style.transform
        newS = oldS + " scale(0.5) translateY(100%) translateX(50%)" 
        ExtraMarkers[l].style.transform = newS

            }
    })
map.on("layeradd", function(layer){
    if(layer.layer._icon && 
        layer.layer._icon.classList.contains("extra-marker")){
        oldS = layer.layer._icon.style.transform;
        newS = oldS + " scale(0.5) translateY(100%) translateX(50%)" ;
        layer.layer._icon.style.transform = newS
       }
    })
L.marker([lat, lng],
                    {draggable:true, icon: L.ExtraMarkers.icon({
    icon: 'fa-number',
    markerColor: 'green',
    shape: 'penta',
    number: '1',
    prefix: 'fa'
  })
})
.on("dragend",function(e){
                        oldS = e.target._icon.style.transform;
                        newS = oldS + " scale(0.5) translateY(100%) translateX(50%)" ;
                        e.target._icon.style.transform = newS
                    });

如果要尝试其他尺寸，应调整translateX和translateY参数。

Leaflet Extra Markers Size

3 个答案: