Изменить (и вернуть обратно) значок листовки по щелчку

Я получил значок, который меняется при нажатии, но мне нужно, чтобы он возвращался к исходному значку (а не оставался новым) при нажатии нового значка.

Например, скажем, все мои значки синие. Когда я нажимаю на значок, я хочу, чтобы он изменился на красный значок. Затем, когда я нажимаю на новый значок, я хочу, чтобы ранее щелкнутый значок снова стал синим.

Я могу заставить его работать с наведением мыши и отключением мыши, но мне действительно нужно, чтобы он работал с щелчком мыши. Я думаю, мне нужно зарегистрировать новую функцию щелчка, но я не уверен, как это сделать.

Вот что у меня есть на данный момент:

function clickFeature(e) {
        var layer = e.target;
        e.target.setIcon(stop);

        info.update(layer.feature.properties);
    }


    var geojson;

    /*function resetHighlight(e) {
        geojson.resetStyle(e.target);
        e.target.setIcon(arms);
        info.update();
    }*/

    function onEachFeature(feature, layer) {
        layer.on({
            click: clickFeature
        });
    }
    geojson = L.geoJson(crossingData, {

        pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: arms});
        },
        onEachFeature: onEachFeature

    }).addTo(map);

icons leaflet onclick
person user1855009    schedule 01.08.2013    source источник

Ответы (2)


arrow_upward
6
arrow_downward

Вы можете попытаться определить отдельную переменную вне функции, которая будет содержать текущий маркер.

var clickedMarker;

function clickFeature(e) {
    if(clickedMarker) {
          clickedMarker.setIcon(arms);
    }
    var layer = e.target;
    e.target.setIcon(stop);
    clickedMarker = e.target;

    info.update(layer.feature.properties);
}
person Michał Krzemiński    schedule 02.08.2013
comment
info.update(layer.feature.properties); для чего это? - person Telarian; 15.08.2019

arrow_upward
4
arrow_downward

Вы должны получить текущую иконку для замены на другую. К сожалению, у L.marker нет метода getIcon(), но вы можете получить к нему доступ через options.icon.

function clickFeature(e) {
    var layer = e.target;
    layer.setIcon(layer.options.icon == arms ? stop : arms);
}
person Mics    schedule 02.08.2013
comment
В настоящее время он имеет: leafletjs.com/reference-1.6.0.html#marker- получить значок. - person TiagoA; 10.03.2020