Mapbox — добавление различных типов пинов щелчком мыши в зависимости от активации кнопки

У меня есть страница, которая загружает мою карту mapbox, и у меня есть две кнопки на странице, позволяющие пользователю добавлять различные типы булавок. Например, пользователь может нажать одну кнопку и добавить один тип булавки. Пока кнопка активна, пользователь может нажимать на карту в последующие разы, и старая булавка будет удалена, а новая добавлена ​​в месте последнего щелчка.

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

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

Я не смог найти ничего подобного в другом месте (если да, дайте ссылку!), поэтому мне пришлось использовать несколько разных примеров из mapbox и stackexchange, чтобы собрать это вместе. По какой-то причине два типа булавок перекрестно связаны - после того, как обе кнопки были активированы, любые новые нажатия обновляют координаты обоих типов булавок и удаляют все предыдущие булавки любого типа. По сути, типы булавок не разделяются по активированным кнопкам, несмотря на мои конкретные утверждения «если», в которых говорится, что только один тип булавки может быть добавлен/удален, если он выбран (счетчик «_clicks» работает правильно для подсчета нажатий кнопок и обнуления). один, когда другой нажат - я перепроверил это).

Почему операторы «if (----_clicks > 0)» выполняются, даже если они ложны? Или, как лучше всего разрешить активацию кнопки управлять типами булавок, добавляемых на карту одним щелчком мыши? Спасибо!

var typeA_marker;
var typeB_marker;
var typeA_clicks = 0;
var typeB_clicks = 0;

$("#button01").on('click', function(){
    typeA_clicks++;
    typeB_clicks = 0;

    if (typeA_clicks > 0) {
        var click = document.getElementById('click');
        map.on('click', function(e) {

                if (typeA_marker !== undefined) {
                    map.removeLayer(typeA_marker);
                }
                typeA_marker = L.marker(e.latlng).addTo(map);
                document.getElementById('location01').value = e.latlng;
        });
    }
});

$("#button02").on('click', function(){
    typeB_clicks++;
    typeA_clicks = 0;

    if (typeB_clicks > 0) {
        var click = document.getElementById('click');
        map.on('click', function(e) {

                if (typeB_marker !== undefined) {
                    map.removeLayer(typeB_marker);
                }
                typeB_marker = L.marker(e.latlng).addTo(map);
                document.getElementById('location02').value = e.latlng;
        });
    }
});

coordinates jquery mapbox onclicklistener map
person sean    schedule 05.10.2014    source источник
comment
После работы над этой проблемой различными методами я думаю, что проблема связана с неправильными вызовами Ajax (или их отсутствием). Похоже, что после нажатия кнопки страница обрабатывает операторы if как постоянно истинные, поэтому она продолжает передавать действия через оба оператора. Я довольно новичок в jQuery. Я буду продолжать исследовать правильную методологию ajax, но если у кого-нибудь есть советы о том, как правильно настроить эти прослушиватели кликов с операторами if, я был бы очень признателен!   -  person sean    schedule 06.10.2014

Ответы (1)


arrow_upward
0
arrow_downward

Я смог понять, что я делаю не так. Для тех, у кого такая же проблема, вам нужно поместить событие щелчка карты вне оператора «if», оценивающего, какая кнопка была нажата в последний раз (см. ниже). Я также понял, что в этом случае мне не нужно объявление переменной "click".

Исправленный код:

var typeA_marker;
var typeB_marker;
var typeA_clicks = 0;
var typeB_clicks = 0;

$("#button01").on('click', function(){
    typeA_clicks++;
    typeB_clicks = 0;

    map.on('click', function(e) {
        if (typeA_clicks > 0) {

            if (typeA_marker !== undefined) {
                map.removeLayer(typeA_marker);
            }
            typeA_marker = L.marker(e.latlng).addTo(map);
            document.getElementById('location01').value = e.latlng;
        }
    });
});

$("#button02").on('click', function(){
    typeB_clicks++;
    typeA_clicks = 0;

    map.on('click', function(e) {
        if (typeB_clicks > 0) {

            if (typeB_marker !== undefined) {
                map.removeLayer(typeB_marker);
            }
            typeB_marker = L.marker(e.latlng).addTo(map);
            document.getElementById('location02').value = e.latlng;
        }
    });
});
person sean    schedule 07.10.2014