Добавление меток Я.карт по дата атрибутам

327

18 марта 2017, 02:15

Есть несколько блоков с дата-атрибутами, значение которых являются координаты. Нужно перебрать все блоки у которых есть эти дата-атрибуты и добавить метки на карту. Вроде бы, все просто, но что то не получается и выбивает ошибку

<div class="main-addresses__item" data-coord="[55.141524, 61.392357]"></div>
<div class="main-addresses__item" data-coord="[55.142140, 61.429013]"></div>
var Placemark = {};
ymaps.ready(function () {
            console.log('2');
            var myMap = new ymaps.Map('addresses__map', {
                center: [55.034842, 61.368563],
                zoom: 10,
                controls: ['zoomControl']
            }, {
                suppressMapOpenBlock: true,
            });
            console.log('3');
            myMap.behaviors.disable('scrollZoom');
            $('.main-addresses__item').each(function() {
                var obj = $(this).attr("data-coord");
                console.log(obj);
                myMap.geoObjects
                .add(new ymaps.Placemark([obj]), {
                    iconCaption: 'test'
                }, {
                    preset: 'islands#greenDotIconWithCaption',
                    iconColor: '#ed4543'
                });
            }); //each
        });

Answer 1

Вы неправильно создали объект Placemark, и нет преобразования из строки в массив

var Placemark = {}; 
 
ymaps.ready(function() { 
  console.log('2'); 
  var myMap = new ymaps.Map('myMap', { 
    center: [55.034842, 61.368563], 
    zoom: 10, 
    controls: ['zoomControl'] 
  }, { 
    suppressMapOpenBlock: true, 
  }); 
  console.log('3'); 
  myMap.behaviors.disable('scrollZoom'); 
 
  $('.main-addresses__item').each(function() { 
    var obj = $(this).attr("data-coord"); 
    obj = JSON.parse(obj); //преобразовываем в объект 
 
    //console.log(obj); //тоже самое, но уже не строка, а объект 
 
    myMap.geoObjects 
      .add(new ymaps.Placemark(obj, { //тут была неправильная ")" и "[obj]" 
        iconCaption: 'test' 
      }, { 
        preset: 'islands#greenDotIconWithCaption', 
        iconColor: '#ed4543' 
      })); 
 
  }); //each 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> 
 
<div class="main-addresses__item" data-coord="[55.141524, 61.392357]"></div> 
<div class="main-addresses__item" data-coord="[55.142140, 61.429013]"></div> 
 
<!-- Область показа карты --> 
<div id="myMap" style="width: 800px; height: 600px"></div>

Answer 2

В инструментах разработчика есть пункт Source, справа есть кнопка в виде паузы, нажми ее и перезагрузи страницу, когда произойдет ошибка скрипт остановиться на ней и можно будет посмотреть трасировку, из нее тебе станет понятно в какой момент происходит ошибка и изза чего, также ты будешь видеть данные которые есть в настояший момент.

На будушее если хочешь чтобы тебе написали ответ или поправили код надо выкладывать мин пример.