How to use array of coordinates from data-attr for yandex maps?

0

0348raven2017-03-09 18:25:07

JavaScript

0348raven, 2017-03-09 18:25:07

Description of the situation:
There are many maps on one page, they are initialized on click.

Card calling code:

ymaps.ready(function () {
    var map = {};

    $('.js-map--trigger').click(function () {

        var container = $(this).closest('.item').find('.js-map');

        $('.js-map').css('height', '');
        $(container).css('height', '300');

        if ('destroy' in map) {
            map.destroy();
        }

        map = new ymaps.Map(container[0], {
            center: [55.753915313211486,37.62053621957395],
            zoom: 10,
            type: 'yandex#map',
            flying: true
        });

        //забираю данные из data-ccords
        var coordsFromDataAttr = $(this).data('coords');
       
        //делаю из этого массив *хотя он уже представлен массивом, вот тут спорный момент, но начала отображаться хотя бы одна метка, но это кривое решения, насколько я понимаю
        var coordsArr = $.makeArray(coordsFromDataAttr);

        console.log(coordsFromDataAttr);

        var coords = [
            coordsArr
        ],

        collection = new ymaps.GeoObjectCollection({}, {
            preset: 'islands#redStretchyIcon'
        });

        for (var i = 0; i < coords.length; i++) {
            collection.add(new ymaps.Placemark(coords[i]))
        }
        
        //пробовал откладывать добавление меток 
        setTimeout(function () {
            map.geoObjects.add(collection);
        }, 1000) ;

    });
})

code in which the necessary coordinates are displayed<body>

<ul>
    <li class="item">
         <div class="js-map">
         </div>
         <div><a href="javascript:void(0);" class="js-map--trigger" data-coords="[55.75, 37.50],[55.75, 37.71],[55.70, 37.70]">На карте</a><div>
    </li>
</ul>

You can see a working example here.

Thanks in advance!

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Anton Shelestov, 2017-03-09
@ShelestovAnt

store the string in data-coords json