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

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/