自定义图例/图像作为传单地图中的图例

我用自定义图标作为标记构建了一个地图。您可以在我的 jsfiddle 中查看代码和结果：https://jsfiddle.net/marielouisejournocode/x24stb0m/

我尝试更改“正常”图例代码以将图片放在那里，但我对 js 和传单很陌生，无法真正解决这个问题。

var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {

var div = L.DomUtil.create('div', 'info legend'),
    grades = [1795, 1945, 1960, 1980, 2000],
    labels = [];

for (var i = 0; i < grades.length; i++) {
    div.innerHTML +=
        '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
        grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
 }

 return div;
 };

 legend.addTo(map);

What I want to do now is insert a legend that explains the icons like in this example:

我会使用 Photoshop 来创建它，但是如何用图像覆盖地图，该图像在地图展开时不会表现得很奇怪，但表现得像传单中的正常图例？

非常感谢， 玛丽

您只需要在数组中插入信息，如下所示：

 grades = ["Car", "ball"],
 labels = ["http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png","http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png"];

And

 grades[i] + (" <img src="+ labels[i] +" height='50' width='50'>") +'<br>';

example:

var legend = L.control({position: 'bottomright'});

legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = ["Car", "ball"],
        labels = ["http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png","http://datentaeter.de/wp-content/uploads/2016/06/flag_de.png"];

    // loop through our density intervals and generate a label with a colored square for each interval
    for (var i = 0; i < grades.length; i++) {
        div.innerHTML +=
            grades[i] + (" <img src="+ labels[i] +" height='50' width='50'>") +'<br>';
    }

    return div;
};

legend.addTo(map);

https://jsfiddle.net/x24stb0m/24/