Leaflet. js: Смена значков маркера работает, но только один раз - PullRequest
Новая
       11

Leaflet. js: Смена значков маркера работает, но только один раз

1 голос
/ 02 апреля 2020

Привет, я пытаюсь создать карту Leaflet с маркерами разных цветов на ней. На каждой из них есть 3 кнопки с событием onClick. Когда я нажимаю на один из них, он добавляет класс «Активировать» к тому, на который я нажал, и удаляет «Активировать» из 2 других.

Затем у меня есть 3 функции, по одной для каждого цвета маркера и функции, которая прочитайте селектор Активируйте класс.

A имеет Activate = синий маркер и предупреждение «Синий», B имеет Activate = зеленый маркер и предупреждение «Зеленый», C имеет Activate = желтый маркер и предупреждение «... Желтый!»

А также при загрузке он выполняет readSelector

И это работает хорошо, но только один раз. Оповещение срабатывает каждый раз, когда я нажимаю на кнопку с хорошим предупреждением, но цвет маркера изменяется только один раз: если я начну с синего (считывая нагрузку), то я нажму на зеленый, маркер будет зеленым, затем я нажму на желтом маркер будет желтым, но если я снова нажму на синий или зеленый, у меня будет хорошее предупреждение, но маркер останется желтым. Это последний цвет 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');
    };
};

Спасибо, что прочитали меня

1 Ответ

1 голос
/ 02 апреля 2020

Это потому, что вы добавили несколько 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');
    };
};
...