yandex map Как в кластере сделать кнопку на балуне?

Question

Всем привет, нужна помощь (знание javascript = 0.01 %) Cоздаю кластер , в метке в балуне добавляю кнопку, но не пойму как мне на нее повесить обработчик события и как далее поменять класс в кнопке? То есть я хочу при нажатие что бы кнопка менялась с 'Выбрать' на 'Удалить', и потом наоборот. По идеи как то нужно прицепляться к балуну по id метки, но я не пойму как.

orderSelection.events

                .add('click', function (e) {
                   AddMarkHidden.setAttribute('data-method', "МетодДобавить")
                        AddMarkHidden.setAttribute('data-nodeID', valInp)
                        AddMarkHidden.setAttribute('data-volume', volume)
                        // alert(volume)
                        const button = document.getElementById('AddMarkHidden');
                })

как можно сделать, что бы при нажатие на кнопку кнопка меняла текст и по возможности класс

function addMarkerCluster(coordin1, coordin2, nameAgent, opisanie, adressAgent, nomerZakaza, volume, driver) {
    arr1.push(new ymaps.Placemark([coordin1, coordin2],{
        id: nomerZakaza,
        balloonContent: volume,
        address: adressAgent,
        object: nomerZakaza,
        comment: opisanie,
        balloonContentBody:  nameAgent + '<br>'  + adressAgent + '<br>' + 'объем: ' + volume + '<br>' + 'комметарий менеджера: '+ opisanie + '<br>'+ '  <strong>' + driver + '</strong>'+'  <p><button id="orderSelection">Выбрать</button></p>'  ,
        clusterCaption: '  <strong>' + nomerZakaza + '</strong>'
    },{
        preset: 'islands#violetIcon'
    }))
    clusterer.add(arr1);
    cluster.refresh(clusterer)
    // myMap.geoObjects.add(clusterer); вместе рефреш
}

Answer 1

Поскольку балун каждый раз создаётся заново, нужно каждый раз заново к кнопке цеплять обработчик нажатия. В данном случае проще всего воспользоваться старым добрым onclick.

balloonContentBody:  nameAgent + '<br>'
  + adressAgent + '<br>'
  + 'объем: ' + volume + '<br>'
  + 'комметарий менеджера: '+ opisanie + '<br>'
  + '  <strong>' + driver + '</strong>'
  + '  <p><button onclick="onSelectOrder(this, ' + nomerZakaza + ')">Выбрать</button></p>'  ,

И функция обработки получает нужные данные:

function onSelectOrder(button, nomerZakaza){
...
}

Сохранять состояние нужно не в кнопке, а, например, в самом маркере. А балун должен лишь правильно отображать состояние. Для этого следует воспользоваться динамическими шаблонами и с помощью стилей показывать нужную кнопку в зависимости от состояния.

let markers = {};

function addMarkerCluster(...){
let marker = new ymaps.Placemark([coordin1, coordin2],{
        id: nomerZakaza,
        balloonContent: volume,
        address: adressAgent,
        object: nomerZakaza,
        comment: opisanie,
        state: '',
        balloonContentBody: '<p class="buttons {{ properties.state }}">
    <button class="button-select" onclick="onSelectOrder(' + nomerZakaza + ')">Выбрать</button>
    <button class="button-delete" onclick="onDeleteOrder(' + nomerZakaza + ')">Удалить</button>
</p>'  ,
        clusterCaption: '  <strong>' + nomerZakaza + '</strong>'
    },{
        preset: 'islands#violetIcon'
    });
markers[nomerZakaza] = marker;
...
}

function onSelectOrder(nomerZakaza){
    markers[nomerZakaza].properties.set('state','selected');
}
function onDeleteOrder(nomerZakaza){
    markers[nomerZakaza].properties.set('state','');
}

БЛОГ НА HUSL

yandex map Как в кластере сделать кнопку на балуне?

Ответы (1 шт):