根据 JSON 属性更改图标

Question

这是我正在处理的地图：

http://members.upcpoczta.pl/w.racek/mapa.html

我想根据 JSON 文件的属性（颜色标签）更改显示在右上角信息框（选择路线时）的图标。用于标记自行车路线的基色有 5 种（蓝色、红色、绿色、黄色、黑色和无色），几乎所有颜色都有颜色（可能有 10% 有符号或不同标记）。我有 5 个 png 图标，应该用它 linked。目前我可以输入简单的 html link 并且它只显示红色图标但也许有办法根据 json 属性更改它？

以下是负责显示此信息框的代码部分： var 信息 = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML =   (props ?
            '<b>' + '<img src="img/red.png " height="42" width="42" >   ' + props.name
            : 'Kliknij na szlak');
    };

    info.addTo(map);

目前图标始终为红色。

我将不胜感激。谢谢！

Answer 1

我看了你的来源，proops 有名字和颜色，所以你可以试试这个：

 info.update = function (props) {
var color='red'; //default color
if(props.colour) 
    color=props.colour;

    this._div.innerHTML =   (props ?
        '<b>' + '<img src="img/'+color+'red.png " height="42" width="42" >   ' + props.name
        : 'Kliknij na szlak');
};

Answer 2

您使用的代码开头错误：

this._div.innerHTML =   (props ?
        '<b>' + '<img src="img/red.png " height="42" width="42" >   ' + props.name
        : 'Kliknij na szlak');

我猜你正在尝试使用 ternary operator。那样行不通。例如，当一个人通常会这样做时：

var value = 'foobar';
var result;

if (value === 'foobar') {
    result = true;
} else {
    result = false;
}

使用三元可以这样写shorthand：

var value = 'foobar';
var result = (value === 'foobar') ? true : false;

或者在本例中，当返回布尔值 true 或 false 时，甚至可以这样做（但这超出了这里的重点）：

var value = 'foobar';
var result = (value === 'foobar');

你的语法有问题，或者我不明白你想做什么。接下来是您正在执行的字符串连接：

'<b>' + '<img src="img/red.png " height="42" width="42" >   '

可以简单写成：

'<b><img src="img/red.png " height="42" width="42" >   '

现在是使用三元运算符和 concat 的实际解决方案：

this._div.innerHTML = (props) ?
        '<b><img src="img/' + props.color + '.png " height="42" width="42" >' + props.name + '</b>' :
        'Kliknij na szlak';

用普通操作员做：

if (props) {
    this._div.innerHTML = '<b><img src="img/' + props.color + '.png " height="42" width="42" >' + props.name + '</b>';
} else {
    this._div.innerHTML = 'Kliknij na szlak';
}

我建议，如果您遇到问题，请使用后者。更容易理解，所以你不太可能犯错误。

根据 JSON 属性更改图标

Change icon based on JSON attributes

json

icons

leaflet