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

213

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

198

javascript

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

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

189

javascript

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

180

javascript

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

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

178