Доброго всем времени суток!
Добавил выпадающий список, но никак не добавить событие Click к каждому элементу.
При клике по пунктам меню, ничего не происходит.
Подскажите как правильно добавить обработчик события?!
файл list_box_layout.js
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map('map', {
center: [55.751574, 37.573856],
zoom: 9,
controls: []
});
var cityList = new ymaps.control.ListBox({
data: {
content: 'Select a city'
},
items: [
//new ymaps.control.ListBoxItem('Москва'),
//new ymaps.control.ListBoxItem('Новосибирск'),
//new ymaps.control.ListBoxItem({options: {type: 'separator'}}),
//new ymaps.control.ListBoxItem('Нью-Йорк')
]
});
// Перебираем все объекты коллекции buildings
for(var i = 0; i < buildings.length; i++)
{
var itemCity = new ymaps.control.ListBoxItem(buildings[i].name);
itemCity.events.add('click',function(){
//myMap.setCenter([buildings[i].latitude,buildings[i].longitude]);
alert(buildings[i].name);
});
cityList.add(itemCity);
}
/*
cityList.get(0)
.events.add('click', function () {
myMap.setCenter([55.752736, 37.606815]);
});
cityList.get(1)
.events.add('click', function () {
myMap.setCenter([55.026366, 82.907803]);
});
cityList.get(3)
.events.add('click', function () {
myMap.setCenter([40.695537, -73.97552]);
});
*/
myMap.controls.add(cityList, {float: 'left'});
}
buildings.js
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'}
];
list_box_layout.html
|
Код:
|
<!DOCTYPE html>
<html>
<head>
<title>Произвольный макет выпадающего списка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--
Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
-->
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=<ваш API-ключ>" type="text/javascript"></script>
<script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>
<script src="list_box_layout.js" type="text/javascript"></script>
<script src ="buildings.js" type="text/javascript"></script>
<link href="https://yandex.st/bootstrap/2.2.2/css/bootstrap.min.css" rel="stylesheet">
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
#my-listbox {
top: auto;
left: auto;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html> |