Клуб API Карт

Плавное перемещение с масштабированием

Пост в архиве.
Ant118126
26 марта 2012, 15:29

 Здравствуйте! Подтолкните меня пожалуйста ещё чуть-чуть! Код на основе примера

http://api.yandex.ru/maps/jsapi/examples/mappanto.html

Благодаря подсказке я сделал зум через 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>

 

9 комментариев

Во врезке у вас написанно правильно, почему вы не написали также в коде?

Не работает потому-что как я и написал! Подскажите тогда пожалуйста почему не работает если это правильно! Вот страница:

 

http://vseryadom.ru/page_1332766294_2.php

  1. Может кто растолковать сообщение консоли?
  2. Uncaught TypeError: Object # has no method 'copy'
    1. a.restrict_YMaps.js:11
    2. a._restrictCenter_YMaps.js:11
    3. t_YMaps.js:11
    4. a.panTo_YMaps.js:11
    5. (anonymous function)page_1332766294_2.php:57
    6. H.event.handle_YMaps.js:11
    7. H.event.add.aa

что тут растолковывать?

panTo ожидает первым аргументом geoPoint

нужно отдавать поле center а не весь объект

Получается так?

 map.panTo(center, {

    flying: 1,

    callback: function () { map.setZoom(zoom, { smooth: true });}

}

);

 

Ошибок меньше стало, теперь

  1. Uncaught ReferenceError: center is not defined
    1. (anonymous function)page_1332766294_2.php:57
    2. H.event.handle_YMaps.js:11
    3. H.event.add.aa
      Блин, я никогда раньше не отлаживал ничего в консоли! Не судите строго! Что ещё не так?

откуда тут center возьмется? из воздуха?

поправить надо было тут

})(item, destinations[item])

на

})(item, destinations[item].center)

а в panTo оставить geoPoint

Я наивно полагал что  // Записываем элемент списка в список 

часть вывода списка, а поскольку список выводится не обращал внимания! Ну хорошо, с последними исправлениями оно заработало, но опять не так как мне хочется! zoom оно берёт из первого города и игнорирует остальные! Что не продвигает меня к решению, т.к. аналогично тупому заданию var zoom вне destinations. Мне нужны разные зумы для разных городов. Обкаточная страница попрежнему:

http://vseryadom.ru/page_1332766294_2.php

 

Буду благодарен если кто ткнёт меня в очередной косяк в коде!


ну передайте зум в замыкание также как передаете center

Спасибо большое за помощь!!! Вроде заработало! :-)

Это была неподъёмная задача для моих скромных познаний, подумываю на курсы JavaScript сходить чтобы знать хотя-бы азы!