Клуб API Карт

Как добавить множество карт с метками?

StanislavOlllin
24 сентября 2016, 18:03

Здравствуйте! Помогите найти ошибку:
Есть такой код, который находит на странице все элементы с классом ".maps-menu" присваивает им id:'map'+i

Затем создается цикл, который в контейнеры с этими id помещает карты. Вот код:

 $(document).ready(function(){
        var i = 1; // вводим порядковый номер в переменную
         $('.maps-class').each(function(){// перебираем все блоки по классу
         $(this).attr('id','map'+i); // присваиваем атрибут id
         i++;  // увеличиваем порядковый номер в переменной на единицу
                })

ymaps.ready(function () {
         var j = document.getElementsByClassName('maps-class').length;
         for (y = 1; y < j+1; y++) {
                            
         var b = "#map"+y; //создаете переменную для извлечения текста методом JQuery
         var g = "map"+y; //создает переменную совпадающую с id ранее созданного контейнера.
         var adress = $(b).text();//возвращает адрес в виде текста
             var myMap, myPlacemark;
    
              myMap = new ymaps.Map(g, {
                      center: [55.76, 37.64],
                      zoom: 13
                      });
              var myGeocoder = ymaps.geocode(adress);
              myGeocoder.then(
                function (res) {
                   myMap.geoObjects.add(res.geoObjects); //добавляет объекты на карту.
                 },
                function (err) {  // обработка ошибки
                                    }
               );
                  //код, что сверху все метки добавляет только в последнюю карту             
                  //а вот тот что с низу на каждую, только туда не получается внести переменную вместо координат
                myPlacemark = new ymaps.Placemark([55.76, 37.64], { 
                                    hintContent: 'Москва!' 
                            });

                            myMap.geoObjects.add(myPlacemark);
  
                            
                        }
                });

})

Проблема в том, что нужно, чтобы на каждой карте добавлялась метка, которая находится по результатам геокодирования взятого из каждого элемента текста.
Все работает, но метки все дружно появляются на последней карте.
Через new ymaps.Placemark([..., ...]... - получается добавлять на карту метки, но не получается у этих меток изменять координаты в каждом повторении цикла.
Что не так?
Заранее спасибо)

Нет комментариев

5 комментариев
Подписаться на комментарии к посту
Геокодер отвечает асинхронно.
Когда отработает его обработчик "then" ваш цикл уже закончит работу и ссылка myMap будет указывать на последнюю карту
Спасибо за ответ. Были такие догадки. Как же теперь быть? Попробую переменную условия создать, которая пустит создание карты во втором цикле только после создания метки в первом.
StanislavOlllin,
В общем случае так в цикле лучше не делать. Зачем создавать так много карт? Нужно создать одну карту и ее использовать. Геокодировать надо через свой сервер, если объектов много.
Прочитайте статью про геокодирование
dimik,
Спасибо. Жаль совершенно не имею знаний о том как работает бэк-энд/серверная сторона, если правильно выражаюсь. Так что с NodeJS Geocode Tool вряд ли разберусь. Я в правильном направлении мыслю: можно добавить одну карту и в разных элементах отобразить отдельные ее части? Просто заказчик пожелал карту к каждому адресу. 
А лучше вообще уберу цикл. Создам переменную y, которая будет y++ после каждой обработки then. Спасибо. Хоть теперь знаю в чем проблема.