如何使用 Leaflet.AwesomeMarkers 获得我想要的颜色？

Question

如何使用 Leaflet.AwesomeMarkers 获得我想要的颜色？

我正在尝试根据每个标记详细信息中的各个属性使用很棒的标记更改图标颜色，但是它们都是红色的，而不是一些是红色的，有些是绿色的。

有人能在这里看到这个问题吗？是否可以有相同类型的不同颜色？

我已经添加了下面的示例，geojson 我在那里设置了图标颜色，但是所有图标都是红色的，你应该可以看到？

谢谢

	var map = L.map('map').setView([54.0, -3.4], 6);
	L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
		attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
		maxZoom: 18,
		id: 'mapbox/streets-v11',
		accessToken: 'x'
	}).addTo(map);

    var geo_data = [
            {'type': 'Feature', 'properties': {'name': 'A', 'popupContent': 'A', 'type': 'Showroom', 'icon': 'fa-home', 'color': '#d53f3a'
                }, 'geometry': {'type': 'Point', 'coordinates': [
                        -2.2671,
                        57.139383
                    ]
                }
            },
            {'type': 'Feature', 'properties': {'name': 'B', 'popupContent': 'B', 'type': 'Showroom', 'icon': 'fa-home', 'color': '#d53f3a'
                }, 'geometry': {'type': 'Point', 'coordinates': [
                        0.4549,
                        51.611151
                    ]
                }
            },
            {'type': 'Feature', 'properties': {'name': 'C', 'popupContent': 'C', 'type': 'Showroom', 'icon': 'fa-home', 'color': '#47a447'
                }, 'geometry': {'type': 'Point', 'coordinates': [
                        0.060676,
                        51.531023
                    ]
                }
            },
        ]
	
	
var Showroom = L.geoJSON(geo_data, {
    filter: function(feature, layer) {
        if (feature.geometry.coordinates != "None") {
            return feature.properties.type === "Showroom";
        }
    },
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {
            icon: L.AwesomeMarkers.icon({
                icon: feature.properties.icon, 
                markerColor: feature.properties.color, 
                prefix: 'fa', 
                iconColor: 'white'
            }
            )}
        );
    },
    onEachFeature: function (feature, layer) {
        layer.bindPopup('<h3>'+feature.properties.popupContent+'</h3>');
        }
    });

    var overlayLayers= {		
        "Showroom": Showroom,
    };

    map.addLayer(Showroom)

    L.control.layers(null,overlayLayers).addTo(map);

Run Code Online (Sandbox Code Playgroud)

<html>
    <head>
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
        integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
        crossorigin=""/>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css" 
        integrity="sha256-EFpFyBbuttUJtoocYzsBnERPWee2JYz4cn5nkUBjW0A=" 
        crossorigin="anonymous" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
    </head>
<body>


<div id="map" style="height:700px;"></div>

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
	integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
	crossorigin="">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.min.js" 
	integrity="sha256-IqiRR5X1QtAdcq5lG4vBB1/WxwrRCkkjno4pfvWyag0=" 
	crossorigin="anonymous">
</script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Iva*_*hez 5

Leaflet.AwesomeMarkers的可用颜色选择有限。引用自述文件：

markerColor 标记的颜色
默认blue 可能的值：red, darkred, orange, green, darkgreen, blue, purple, darkpurple,cadetblue

AwesomeMarkers 使用静态图像的一部分作为标记，并且该图像只有有限的颜色选择，这一事实得到了加强：

与iconColor可以取任何值的选项进行比较。再次引用，强调我的：

iconColor 图标的颜色默认white 可能的值：white,black或css 代码（十六进制、rgba 等）

您应该考虑使用其他标记插件，将颜色保留在可供 AwesomeMarkers 使用的选择范围内，或者提供您自己的标记图像。

归档时间：	6 年，4 月前
查看次数：	1236 次
最近记录：	6 年，4 月前