Question

这是我正在处理的地图：

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

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

以下是负责显示此信息框的代码部分： var info = 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;
}

使用三元组，您可以像这样简写：

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属性更改图标

2 个答案: