Добавление в ListBoxItems циклом из массива

255
21 октября 2018, 16:50

Имеется массив с координатами точек, названием и содержимым для балуна, циклом добавляется в коллекцию и выводятся точки на карту. Но встал вопрос с добавлением названия точки в выпадающий список и по клике на списке переходу к координатам точки. Ну та вот, если описывать каждый элемент списка - все работает, но код громоздкий, пробовал записать ListBoxItems из массива - не получается.

Цикл добавления в коллекцию:

for (var i = 0, l = myPoints.length; i < l; i++) { 
        var point = myPoints[i]; 
        myCollection.add(new ymaps.Placemark( 
            point.coords, { 
			balloonContentHeader: point.textIcon, 
            balloonContent: point.text, 
			iconContent: point.id, 
            iconCaption: point.textIcon 
                 
            } 
        )); 
    }

Работающее добавление в ListBoxItems:

listBoxItems = [ 
		    new ymaps.control.ListBoxItem({ 
                data: { 
                    content: 'Школа 1', 
                    center: [45.060930, 38.964569], 
                    zoom: 14 
                } 
            }), 
            new ymaps.control.ListBoxItem({ 
                data: { 
                    content: 'Школа 2', 
                    center: [45.035470, 38.975313], 
                    zoom: 14 
                } 
            }) 
        ],

Не работающий цикл добавления в ListBoxItems:

for (var i = 0, l = myPoints.length; i < l; i++) { 
        var point = myPoints[i]; 
		new ymaps.control.ListBoxItem({ 
                data: { 
                    content: point.id, 
                    center: point.coords, 
                    zoom: 14 
                } 
            }); 
		}

Сразу скажу что не особо шарю в программировании.

Answer 1

Я это себе вижу примерно так 

ymaps.ready(init); 
 
function init() { 
    var myMap = new ymaps.Map('map', { 
            center: [55.76, 37.64], 
            zoom: 10, 
            controls: [] 
        }, { 
            searchControlProvider: 'yandex#search' 
        }); 
 
    var listBoxItems = [[60, 30], [61, 30], [62, 30], [63, 30], [64, 30], [65, 30]] 
        .map(function(coords) { 
            return new ymaps.control.ListBoxItem({ 
                data: { 
                    content: 'Go to -> ' + coords, 
                    coords: coords 
                }, 
            options: { 
                selectOnClick: false 
            } 
            }) 
        }), 
        listBoxControl = new ymaps.control.ListBox({ 
            data: { 
                content: 'Go to', 
                title: 'Go to' 
            }, 
            items: listBoxItems 
        }); 
    myMap.controls.add(listBoxControl); 
 
    listBoxControl.events.add(['click'], function(e) { 
        var coords = e.get('target').data.get('coords'); 
        if(coords) { 
            myMap.setCenter(coords); 
        } 
    }); 
 
}
html, body, #map { 
            width: 100%; height: 100%; padding: 0; margin: 0; 
        }
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script> 
<div id="map"></div>

READ ALSO
Как сделать группировку меток yandex map API
javascript

Как сделать группировку меток yandex map API

Наткнулся на этот пост Группировка меток на карте но на практике выкидывает не понятные ошибке http://dtenpokt

 239
Слайдер работает когда хочет
javascript

Слайдер работает когда хочет

Есть сайт, в нем в popup находится слайдер SwiperПроблема в том, что слайдер работает через раз, когда захочет

 232
Регулярка на js для HH:MM время от 00:00 до 23:59
javascript

Регулярка на js для HH:MM время от 00:00 до 23:59

Регулярка на js для HH:MM время от 00:00 до 23:59

 221
Чтение txt из интернета
javascript

Чтение txt из интернета

Как прочитать txt файл из интернета и записать его содержимое в переменную на nodejs

 218