Клуб API Карт

Поправьте код плиз

Пост в архиве.

Есть следующий код.

так как пока еще не успел разобраться в апи составил из примеров в документации.

 

 YMaps.jQuery(function () {

            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]),

                destinations = {

                    'Офис 1' : new YMaps.GeoPoint(30.343851, 59.928005),

                    'Офис 2' : new YMaps.GeoPoint(30.327654, 59.934758),

    'Офис 3' : new YMaps.GeoPoint(30.314341, 59.867466),

                };

var placemark = new YMaps.Placemark(new YMaps.GeoPoint(30.343851, 59.928005));

placemark.name = "<div align='center'>Офис 1</div>";

placemark.description = "<b>адрес:</b><br>ул.Рубинштейна дом 34";

map.addOverlay(placemark); 


var placemark = new YMaps.Placemark(new YMaps.GeoPoint(30.327654, 59.934758));

placemark.name = "<div align='center'>Офис 2</div>";

placemark.description = "<b>адрес:</b><br>Невский проспект дом 29";

map.addOverlay(placemark); 


var placemark = new YMaps.Placemark(new YMaps.GeoPoint(30.314341, 59.867466));

placemark.name = "<div align='center'>Офис 3</div>";

placemark.description = "<b>адрес:</b><br>площадь Чернышевского дом 10";

map.addOverlay(placemark); 


 map.setCenter(new YMaps.GeoPoint(30.343851, 59.928005), 14); //центрируем карту не на точке

 

 map.addControl(new YMaps.ToolBar()); //  увеличение, линейка, рука

 map.addControl(new YMaps.Zoom());//зум


            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});

                                return false;

                            })

                            .end()

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

                        .appendTo(menuContainer);

                })(item, destinations[item])

            }

        });

 


1. Как исправить описание каждого пункта destinations так что бы уже в нем указать содержание балуна, а не указывать отдельно ниже по коду как у меня.

2. И еще поправить код так что бы при клике на ссылку, карта не только перемещалась в указанную точку, но и открывался балун принадлежащей это точке.


Спасибо заранее!


7 комментариев
записать строку дестинейшена в виде
 'Офис 1' :{ latlng: new YMaps.GeoPoint(30.343851, 59.928005), content:'блаблабла'}

(function (title, geoPoint) { меняем на
(function (title, Point) {
 var geoPoint=Point.latlng;

ну и из Point.content данные для балуна..

2.как открыть балун - вешается на MoveEnd ивент карты перед panTo и не забываем убить свой listener по наступлению события.
Спасибо за ответ! Но... Сделал как вы сказали. Но теперь у меня на карте ни одной метки!
uneed.ru/map/
Меток нет, потому что вы их не добавили на карту. Можно это исправить, например, вот так:
// Генерирование меню
for (var item in destinations) {
    // Используем замыкание, чтобы работать с конкретным свойством объекта
    (function (title, item) {
   
        // Создаем метку
        var placemark = new YMaps.Placemark(item.latlng);
        placemark.description = item.content;
        map.addOverlay(placemark);

         // Создаем ссылку, обернутую в тег

для более приятного визуального восприятия
        YMaps.jQuery("

  • " + title + "
  • ")
                .find('a')
                    // Создаем обработчик по щелчку на ссылке
                    .bind('click', function () {           

                        // Подчеркиваем все ссылки
                        menuContainer.find('a').css('text-decoration', 'underline');
                       
                        // Кроме той, на которую щелкнули
                        YMaps.jQuery(this).css('text-decoration', 'none');
                       
                        // Перемещаем карту
                        map.panTo(item.latlng, {
                            flying: 1,
                           
                            // По окончанию перемещения карты открываем балун
                            callback : function () {
                                placemark.openBalloon();
                            }
                        });
                        return false;
                    })
                    .end()
               
                // Записываем элемент списка в список
                .appendTo(menuContainer);
        })(item, destinations[item])
    }

    И еще одно замечание. Подгружайте API по урлу http://api-maps.yandex.ru/, а не из сохранненого index.xml.
    Спасибо. Всё работает!!! А почему не стоит подгружать их xml файла? Api ведь надо регистрировать для каждого сайта отдельно?
    Да, ключ необходимо получать для каждого сайта. У вас возникли сложности при использовании API на нескольких проектах одновременно?
    Нет пока)) Сделаю как вы рекомендуете! Спасибо вам за помощь!