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

Question

您好，我尝试创建一张带有不同颜色标记的传单地图。有 3 个按钮，每个按钮都有 onClick 事件。在我点击其中一个的地方，它将 "Activate" class 添加到我点击的那个，并从另外 2 个中删除 "Activate"。

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

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

并加载它执行 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');
    };
};

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

Leaflet.js : Changing Marker icons works, but only once

html

javascript

icons

marker

leaflet