Здравствуйте! Подтолкните меня пожалуйста ещё чуть-чуть! Код на основе примера
http://api.yandex.ru/maps
Благодаря подсказке я сделал зум через callback function для panTo. Проблема у меня с тем чтобы передать переменную zoom в эту callback функцию в зависимости от выбранного города! Для отладки я пока просто задал var zoom=14; Но мне нужен разный зум для разных городов.
Конструкции вида
destinations = {
'Москва' : {
center : new YMaps.GeoPoint(37.609218,55.753559),
zoom : 10
},
...
};
map.setCenter(destinations['Москва'].center, destinations['Москва'].zoom);
неработоспособны! Не получается в description добавить переменную zoom для каждого города! Может как-нибудь вне description задать можно? Я искал в вопросах и ответах и документации, но не смог найти ни одного схожего примера!
<script type="text/javascript">
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]),
destinations = {
'Москва' : new YMaps.GeoPoint(37.609218,55.753559),
'Санкт-Петербург' : new YMaps.GeoPoint(30.313497,59.938531),
'Екатеринбург' : new YMaps.GeoPoint(60.617435,56.829748),
'Одесса' : new YMaps.GeoPoint(30.7058,46.466444)
};
// Центрируем карту на первом городе
map.setCenter(destinations['Москва'], 10);
var zoom=14;
// Ссылка на контейнер для меню
var menuContainer = YMaps.jQuery('#mapMenu');
// Генерирование меню
for (var item in destinations) {
// Используем замыкание, чтобы работать с конкретным свойством объекта
(function (title, geoPoint) {
// Создаем ссылку, обернутую в тег <p> для более приятного визуального восприятия
YMaps.jQuery("<li><a href=\"#\">" + item + "</a></li>")
.find('a')
// Создаем обработчик по щелчку на ссылке
.bind('click', function () {
// Подчеркиваем все ссылки
menuContainer.find('a').css('text-decoration', 'underline');
// Кроме той, на которую щелкнули
YMaps.jQuery(this).css('text-decoration', 'none');
// Перемещаем карту
map.panTo(geoPoint, {
flying: 1,
callback: function () { map.setZoom(zoom, { smooth: true }}
}
return false;
})
.end()
// Записываем элемент списка в список
.appendTo(menuContainer);
})(item, destinations[item])
}
}
</script>
</head>
<body>
<ul id="mapMenu"></ul>
<div id="YMapsID" style="width:600px;height:400px"></div>
</body>
</html>
<script type="text/javascript">
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]),
destinations = {
'Москва' : {
center : new YMaps.GeoPoint(37.609218,55.753559),
zoom : 10
},
'Екатеринбург' : {
center : new YMaps.GeoPoint(60.617435,56.829748),
zoom : 14
},
'Одесса' : {
center : new YMaps.GeoPoint(30.7058,46.466444),
zoom : 6
}
};
// Центрируем карту на первом городе
map.setCenter(destinations['Москва'].center, destinations['Москва'].zoom);
// Ссылка на контейнер для меню
var menuContainer = YMaps.jQuery('#mapMenu');
// Генерирование меню
for (var item in destinations) {
// Используем замыкание, чтобы работать с конкретным свойством объекта
(function (title, geoPoint) {
var mapzoom = destinations[item].zoom;
// Создаем ссылку, обернутую в тег <p> для более приятного визуального восприятия
YMaps.jQuery("<li><a href=\"#\">" + item + "</a></li>")
.find('a')
// Создаем обработчик по щелчку на ссылке
.bind('click', function () {
// Подчеркиваем все ссылки
menuContainer.find('a').css('text-decoration', 'underline');
// Кроме той, на которую щелкнули
YMaps.jQuery(this).css('text-decoration', 'none');
// Перемещаем карту
map.panTo(geoPoint, {
flying: 1,
callback: function () { map.setZoom(mapzoom, { smooth: true }}
}
return false;
})
.end()
// Записываем элемент списка в список
.appendTo(menuContainer);
})(item, destinations[item].center)
}
// Добавление элементов управления
map.addControl(new YMaps.Zoom()
}
</script>