单击更改(并更改回)传单图标

时间:2013-08-01 14:46:04

标签: onclick icons leaflet

我已经获得了点击更改的图标,但是当点击新图标时,我需要将其更改回原始图标(不是保留新图标)。

例如,假设我的所有图标都是蓝色的。当我点击图标时,我希望它变为红色图标。然后,当我点击一个新图标时,我希望之前点击的图标变回蓝色。

我可以使用mouseover和mouseout工作,但我确实需要它才能使用click。我想我需要记录一个新的点击功能,但我不确定如何。

以下是我目前的情况:

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);

2 个答案:

答案 0 :(得分:4)

您可以尝试在函数外部定义单独的变量,该变量将保存当前单击的标记。

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);
}

答案 1 :(得分:3)

您应该获得当前的图标以便更改为另一个。很遗憾,L.marker没有getIcon()方法,但您可以通过options.icon访问它。

function clickFeature(e) {
    var layer = e.target;
    layer.setIcon(layer.options.icon == arms ? stop : arms);
}