Leaflet.js：更改标记图标有效，但只有一次

Question

您好，我尝试创建一个带有不同颜色标记的传单地图。 每个按钮上有 3 个带有 onClick 事件的按钮。在我单击其中一个的地方，它会将“激活”类添加到我单击的那个中，并从另外两个中删除“激活”。

然后我有 3 个函数，一个用于每种标记颜色，一个用于读取选择器激活类的函数。

A 有激活 = 蓝色标记和警报“蓝色”，B 有激活 = 绿色标记和警报“绿色”，C 有激活 = 黄色标记和警报“...黄色！”

并且 onload 它执行 readSelector

这很好用，但只有一次。每次我点击一个按钮时，警报都会起作用，警报很好，但标记颜色只改变一次： 如果我从蓝色开始（通过阅读 onload），然后我点击绿色，标记将是绿色，然后我点击黄色，标记将是黄色，但如果我再次点击蓝色或绿色，我会有好的警报，但标记保持黄色。它仍然是 3 的最后一种颜色。

我不知道这是否可以理解。

HTML ::

<div id="mapWrap" class="container">
    <div class="row">
        <div class="col-1 m-0 p-0">
            <div class="mapTool">
                <ul class="list-group list-group-horizontal m-0 p-0 mb-3">
                    <li class="list-group-item flex-fill bg-success categorySelector selectorActivate" id="santeSelector" onclick="onClickSante()">Santé</li>
                    <li class="list-group-item flex-fill bg-primary categorySelector " id="educSelector" onclick="onClickEduc()">Education</li>
                    <li class="list-group-item flex-fill bg-warning categorySelector " id="loisirSelector" onclick="onClickLoisir()">Loisir</li>
                </ul>
            </div>
        </div>
        <div class="col-11 m-0 p-0">
            <div id="mapid">
            </div>
        </div>
    </div>
</div>

JAVASCRIPT ::

//// OnClick 函数 ////

    var sante = $('#santeSelector');
    var educ = $('#educSelector');
    var loisir = $('#loisirSelector');

function onClickSante(){
    sante.addClass('selectorActivate');
    educ.removeClass('selectorActivate');
    loisir.removeClass('selectorActivate');
    };
sante.on('click',onClickSante);

function onClickEduc(){
    educ.addClass('selectorActivate');
    loisir.removeClass('selectorActivate');
    sante.removeClass('selectorActivate');
    };
educ.on('click',onClickEduc);

function onClickLoisir(){
    loisir.addClass('selectorActivate');
    sante.removeClass('selectorActivate');
    educ.removeClass('selectorActivate');
    };
loisir.on('click',onClickLoisir);

//// 地图部分 ////

    init map code from Leaflet 

//// 标记函数 ////

var markerColor = L.marker();

function greenIconMark(e){
    markerColor
        .setLatLng(e.latlng)
        .setIcon(greenIcon)
        .addTo(mymap);
}
function blueIconMark(e){
    markerColor
        .setLatLng(e.latlng)
        .setIcon(blueIcon)
        .addTo(mymap);
}
function yellowIconMark(e){
    markerColor
        .setLatLng(e.latlng)
        .setIcon(yellowIcon)
        .addTo(mymap);
}
$('#santeSelector').on('click',readSelector);
$('#educSelector').on('click',readSelector);
$('#loisirSelector').on('click',readSelector);

window.onload = readSelector;

function readSelector(){

    if( $('#santeSelector').hasClass('selectorActivate') ){

        mymap.on('click', greenIconMark);
        alert('Santé is selected');

    }else if( $('#educSelector').hasClass('selectorActivate') ){

        mymap.on('click', blueIconMark);
        alert('Education is selected');

    }else if( $('#loisirSelector').hasClass('selectorActivate') ){

        mymap.on('click', yellowIconMark);
        alert('Loisir is selected');
    };
};

感谢阅读

Answer 1

这是因为您添加了多个on 事件，最后一个事件被执行。

将您的代码更改为：

function readSelector(){

    if( $('#santeSelector').hasClass('selectorActivate') ){

        mymap.off().on('click', greenIconMark);
        alert('Santé is selected');

    }else if( $('#educSelector').hasClass('selectorActivate') ){

        mymap.off().on('click', blueIconMark);
        alert('Education is selected');

    }else if( $('#loisirSelector').hasClass('selectorActivate') ){

        mymap.off().on('click', yellowIconMark);
        alert('Loisir is selected');
    };
};