Не добавить на карту ListBox

@mutex · Регистрация: 18.04.2009

Студворк — интернет-сервис помощи студентам

Доброго всем времени суток!

Взял с ресурсов Яндекса пример кода работы с Яндекс картами.
Но никак не получается на карту добавить ListBox.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
    // Создание экземпляра карты и его привязка к созданному контейнеру
    var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
    // Установка для карты ее центра и масштаба
    map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
    map.setCenter(new YMaps.GeoPoint(28.35539991, 57.80714194), 16);
 
    // Создание группы объектов и добавление ее на карту
    var group = new YMaps.GeoObjectCollection();
 
    // Перебираем все объекты коллекции buildings
    for(var i = 0; i < buildings.length; i++)
    {
        //Добавляем метки на карту
        var geopoint = new YMaps.GeoPoint(buildings[i].latitude,buildings[i].longitude);
        group.add(createPlacemark(geopoint,buildings[i].name,buildings[i].description));
    }
 
    map.addOverlay(group);
 
    // Создание управляющего элемента "Путеводитель по офисам"
    map.addControl(new OfficeNavigator(group));
 
    var spdList = new YMaps.control.ListBox({
        data: {
            content: 'Узел СПД'
        },
        items:
        [
        ]
    });
    for (var i = 0; i < buildings.length; i++)
    {
        var spdListItem = new ymaps.control.ListBoxItem(buildings[i].name);
        spdListItem.events.add('click',function () {  
        });
        spdList.add(spdListItem);
    }
 
    myMap.controls.add(spdList, {float: 'left'});
});
 
// Функия создания метки
function createPlacemark (geoPoint, name, description) {
    var placemark = new YMaps.Placemark(geoPoint);
    placemark.name = name;
    placemark.description = description;
 
    return placemark;
}
 
// Управляющий элемент "Путеводитель по офисам", реализиует интерфейс YMaps.IControl
function OfficeNavigator (offices) {
    // Добавление на карту
    this.onAddToMap = function (map, position) {
            this.container = YMaps.jQuery("<ul></ul>");
            //this.container = window.document.querySelector("#spd");
            this.map = map;
            this.position = position || new YMaps.ControlPosition(YMaps.ControlPosition.TOP_RIGHT, new YMaps.Size(10, 10));
 
            // Выставление необходимых CSS-свойств
            this.container.css({
                position: "absolute",
                zIndex: YMaps.ZIndex.CONTROL,
                background: '#fff',
                //listStyle: 'none',
                listStyle: 'square',
                padding: '10px',
                margin: 0
            });
            
            // Формирование списка офисов
            this._generateList();
            
            // Применение позиции к управляющему элементу
            this.position.apply(this.container);
            
            // Добавление на карту
            this.container.appendTo(this.map.getContainer());
    }
 
    // Удаление с карты
    this.onRemoveFromMap = function () {
        this.container.remove();
        this.container = this.map = null;
    };
 
    // Пока "летим" игнорируем клики по ссылкам
    this.isFlying = 0;
 
    // Формирование списка офисов
    this._generateList = function () {
        var _this = this;
        
        // Для каждого объекта вызываем функцию-обработчик
        offices.forEach(function (obj) {
            // Создание ссылки на объект
            var li = YMaps.jQuery("<li><a href=\"#\">" + obj.name + "</a></li>"),
                a = li.find("a"); 
            
            // Создание обработчика щелчка по ссылке
            li.bind("click", function () {
                if (!_this.isFlying) {
                    _this.isFlying = 1;
                    _this.map.panTo(obj.getGeoPoint(), {
                        flying: 1,
                        callback: function () {
                            obj.openBalloon();
                            _this.isFlying = 0;
                        }
                    });
                }
                return false;
            });
            
            // Слушатели событий на открытие и закрытие балуна у объекта
            YMaps.Events.observe(obj, obj.Events.BalloonOpen, function () {
                a.css("text-decoration", "none");
            });
            
            YMaps.Events.observe(obj, obj.Events.BalloonClose, function () {
                a.css("text-decoration", "");
            });
            
            // Добавление ссылки на объект в общий список
            li.appendTo(_this.container);
        });
    };
}

JavaScript
1
2
3
4
5
6
7
8
9
10
var buildings = [
    {latitude: 37.678514,longitude: 55.758255,name: 'Москва (Самокатная)', description:'Москва, ул. Самокатная, дом 1, строение 21'},
    {latitude: 37.587398,longitude: 55.734172,name: 'Москва (Парк культуры)', description:'Москва, ул. Тимура Фрунзе, 11 и ул. Льва Толстого, 16'},
    {latitude: 60.644555,longitude: 56.845209,name: 'Екатеринбург', description:'Екатеринбург, ул. Гагарина, 8, офис 602'},
    {latitude: 30.406127143,longitude: 59.9590655815,name: 'Санкт-Петербург', description:'Санкт-Петербург, Cвердловская набережная, дом 44, бизнес-центр «Бенуа» (4-6 эт.)'},
    {latitude: 30.749512,longitude: 46.459542,name: 'Одесса', description:'Одесса, пр. Шевченко, дом 4-Д, офис 61'},
    {latitude: 30.598379,longitude: 50.45332,name: 'Киев', description:'Киев, ул. Луначарского, 4'},
    {latitude: 34.095482,longitude: 44.949507,name: 'Симферополь',description: 'Симферополь, ул. Героев Аджимушкая, 6/13, второй этаж'},
    {latitude:-122.348557,longitude: 37.578894,name: 'Burlingame',description: '3d floor, Suite 306, 330 Primrose Road Burlingame, CA 94010'}
];

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Офисы</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://api-maps.yandex.ru/1.1/index.xml" type="text/javascript"></script>
    <script src="yamaps.js" type="text/javascript"></script>
    <script src="buildings.js" type="text/javascript"></script>
</head>
 
<body>
    <div id="YMapsID" style="width:1500px;height:800px">
</body>
</html>

Помогите разобраться в чём затык?

@mutex · 03.02.2020, 22:54 **[ТС]**

Разобрался с добавление выпадающего списка, но никак не добавить событие Click к каждому элементу.
Но при вставке кода добавления функции события Click выпадающий список не отображает.
Но если этот кусок кода убрать, то список появляется.
Подскажите как правильно добавить обработчик события?!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
    // Создание экземпляра карты и его привязка к созданному контейнеру
    var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
    // Установка для карты ее центра и масштаба
    map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);
    map.setCenter(new YMaps.GeoPoint(28.35539991, 57.80714194), 16);
 
    // Создание группы объектов и добавление ее на карту
    var group = new YMaps.GeoObjectCollection();
 
    // Перебираем все объекты коллекции buildings
    for(var i = 0; i < buildings.length; i++)
    {
        //Добавляем метки на карту
        var geopoint = new YMaps.GeoPoint(buildings[i].latitude,buildings[i].longitude);
        group.add(createPlacemark(geopoint,buildings[i].name,buildings[i].description));
    }
 
    map.addOverlay(group);
    // Создание управляющего элемента "Путеводитель по офисам"
    //map.addControl(new OfficeNavigator(group));
 
    // Создание выпадающего списка
    var spdList = new YMaps.ListBox();
    // Создаём элементы списка и добавляем их в список
    for (var i = 0; i < buildings.length; i++)
    {
        var spdListItem = new YMaps.ListBoxItem(buildings[i].name);
        spdListItem.Events.add('Click', function()
        {
            //map.setCenter([buildings[i].latitude,buildings[i].longitude]);
            alert("Работает!");
        });
        spdList.add(spdListItem);
    } 
    // Создание панели инструментов с выпадающим списком
    var toolBar = new YMaps.ToolBar(spdList);
    // Добавление панели инструментов на карту
    map.addControl(toolBar);
});
 
// Функия создания метки
function createPlacemark (geoPoint, name, description) {
    var placemark = new YMaps.Placemark(geoPoint);
    placemark.name = name;
    placemark.description = description;
 
    return placemark;
}
 
// Управляющий элемент "Путеводитель по офисам", реализиует интерфейс YMaps.IControl
function OfficeNavigator (offices) {
    // Добавление на карту
    this.onAddToMap = function (map, position) {
            //Как получить доступ к ListBox ???
            this.container = YMaps.jQuery("<ul></ul>");
            //this.container = window.document.querySelector("#spd");
            this.map = map;
            this.position = position || new YMaps.ControlPosition(YMaps.ControlPosition.TOP_RIGHT, new YMaps.Size(10, 10));
 
            // Выставление необходимых CSS-свойств
            this.container.css({
                position: "absolute",
                zIndex: YMaps.ZIndex.CONTROL,
                background: '#fff',
                //listStyle: 'none',
                listStyle: 'square',
                padding: '10px',
                margin: 0
            });
            
            // Формирование списка офисов
            this._generateList();
            
            // Применение позиции к управляющему элементу
            this.position.apply(this.container);
            
            // Добавление на карту
            this.container.appendTo(this.map.getContainer());
    }
 
    // Удаление с карты
    this.onRemoveFromMap = function () {
        this.container.remove();
        this.container = this.map = null;
    };
 
    // Пока "летим" игнорируем клики по ссылкам
    this.isFlying = 0;
 
    // Формирование списка офисов
    this._generateList = function () {
        var _this = this;
        
        // Для каждого объекта вызываем функцию-обработчик
        offices.forEach(function (obj) {
            // Создание ссылки на объект
            var li = YMaps.jQuery("<li><a href=\"#\">" + obj.name + "</a></li>"),
                a = li.find("a"); 
            
            // Создание обработчика щелчка по ссылке
            li.bind("click", function () {
                if (!_this.isFlying) {
                    _this.isFlying = 1;
                    _this.map.panTo(obj.getGeoPoint(), {
                        flying: 1,
                        callback: function () {
                            obj.openBalloon();
                            _this.isFlying = 0;
                        }
                    });
                }
                return false;
            });
            
            // Слушатели событий на открытие и закрытие балуна у объекта
            YMaps.Events.observe(obj, obj.Events.BalloonOpen, function () {
                a.css("text-decoration", "none");
            });
            
            YMaps.Events.observe(obj, obj.Events.BalloonClose, function () {
                a.css("text-decoration", "");
            });
            
            // Добавление ссылки на объект в общий список
            li.appendTo(_this.container);
        });
    };
}

Новые блоги и статьи Все статьи Все блоги /
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .