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

Question

我用自定义图标作为标记构建了一个地图。你可以在我的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);

我现在想要做的是插入一个图例来解释这个例子中的图标：

我会使用photoshop来创建它，但是如果在地图传播但行为像传单中的普通图例时，如何使用不会表现奇怪的图像覆盖地图？

非常感谢， 玛丽

Answer 1

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

 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"];

和

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

示例：

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/