Несколько яндекс карт в цикле с кнопками. Не работают кнопки

99
13 февраля 2021, 07:40

Есть такая проблемка. Выводится какое-то кол-во яндекс карт, сейчас 3, в цикле. Запрещается скролл и перемещение на них. Добавляется кнопка, при нажатии на которую можно двигать карту. Для одной карты работает кнопка. А для нескольких в цикле уже нет. Мозгов не хватает понять в чём дело :)

$(document).ready(function () { 
  ymaps.ready(init); 
 
  var maps = []; 
  var placemarks = []; 
  var centers = [ 
    [50, 40], 
    [50, 40], 
    [50, 40], 
  ]; 
  var dragBtns = []; 
  var N = $('.bMap').length; 
 
  function init () { 
    for (var q = 0; q < N; q++) { 
      var ind = q + 1; 
      var mapId = 'map' + ind; 
 
      maps[q] = new ymaps.Map(mapId, { 
        center: centers[q], 
        zoom: 16, 
        controls: ['zoomControl', 'fullscreenControl'] 
      }); 
 
      maps[q].behaviors.disable('scrollZoom'); 
      maps[q].behaviors.disable('drag'); 
 
      placemarks[q] = new ymaps.Placemark(centers[q], { 
        hintContent: 'Title', 
        balloonContent: ''}, { 
        iconLayout: 'default#image', 
        iconImageHref: 'img/map-pin.png', 
        iconImageSize: [76, 93], 
        iconImageOffset: [-38, -67] 
      }); 
 
      maps[q].geoObjects.add(placemarks[q]); 
 
      // enable/disable drag map 
      dragBtns[q] = new ymaps.control.Button('<b>Двигать карту</b>'); 
 
      function enableBtn (q) { 
        // ПОХОЖЕ ПРОБЛЕМА ЗДЕСЬ 
        maps[q].behaviors.enable('drag'); 
      } 
 
      function disableBtn (q) { 
        // И ЗДЕСЬ 
        maps[q].behaviors.disable('drag'); 
      } 
 
      dragBtns[q].events 
        .add('select', enableBtn(q)) 
        .add('deselect', disableBtn(q)); 
 
      maps[q].controls.add(dragBtns[q], { 
        float: "left", 
        maxWidth: 155 
      }); 
      // / 
    } // /for 
  } 
});

Answer 1

У вас переменная q в замыкании. На момент клика по кнопке она уже равна N. Залогируйте её или воспользуйтесь отладчиком, чтобы убедиться в этом.

Код придется немного поменять. Самый простой способ - вынести внутренности for в функцию, которая будет принимать q как аргумент.

READ ALSO
Как сравнить разницу между текущей и будущей датой с точностью до месяца?

Как сравнить разницу между текущей и будущей датой с точностью до месяца?

Есть задачка, в которой необходимо сравнить текущую дату с заданной в будущем с точностью до месяца включительно и определить разницу в количестве...

117
Ошибка CORS при работе с API

Ошибка CORS при работе с API

У Pinboard есть APIКогда я хочу обратится к нему из браузера мне выдает ошибку CORS

121
Slick slider + Thumbnails в модальном окне

Slick slider + Thumbnails в модальном окне

Планирую использовать slick slider в модальном окне (плагин Remodal)Посмотреть можно тут в разделе "Наши работы"

139
VueJS || Добавить Object в Object

VueJS || Добавить Object в Object

По клике на кнопку необходимо в Object добавить ObjectПоясняю что необходимо: Имею Object , который выглядит как структура разделов ( развернутый Object)

156