Клуб API Карт

Изменение меток в группе и геокодировании

iplayfootball.ru
25 марта 2010, 15:33

Приветствую участников и гостей клуба API.Яндекс.Карт!

Я уже как две недели "парюсь" над соединением трех js уроков:

 Вывод поиска в отдельную строку 

 Группы на карте

Создание собственного значка для метки (ну и балуна тоже)

Получается полная пурга, которая работает частично:

var map, geoResult;

// Создание обработчика для события window.onLoad

        YMaps.jQuery(function () {

 

// Создание стиля для значка метки

            // Создание экземпляра карты и его привязка к созданному контейнеру

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


            // Установка для карты ее центра и масштаба

            map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);

 

            // Добавление элементов управления

            map.addControl(new YMaps.TypeControl());

            map.addControl(new YMaps.ToolBar());

            map.addControl(new YMaps.Zoom());

            map.addControl(new YMaps.MiniMap());

            map.addControl(new YMaps.ScaleLine());


// Значок для группы 1

var gruppa1 = new YMaps.Style();

            gruppa1.iconStyle = new YMaps.IconStyle();

            gruppa1.iconStyle.href = "/i/maps/icons/photo.png";

            gruppa1.iconStyle.size = new YMaps.Point(18, 29);

            gruppa1.iconStyle.offset = new YMaps.Point(-9, -29);

 

            gruppa1.iconStyle.shadow = new YMaps.IconShadowStyle();

            gruppa1.iconStyle.shadow.href = "/i/maps/icons/photo-shadow.png";

            gruppa1.iconStyle.shadow.size = new YMaps.Point(18, 29);

            gruppa1.iconStyle.shadow.offset = new YMaps.Point(-9, -29);

gruppa1.balloonContentStyle = new YMaps.BalloonContentStyle(

            new YMaps.Template("<div style=\"color:green\">$[description]</div>"));

// Значок для группы 2

var gruppa2 = new YMaps.Style();

            gruppa2.iconStyle = new YMaps.IconStyle();

            gruppa2.iconStyle.href = "/i/maps/icons/photo.png";

            gruppa2.iconStyle.size = new YMaps.Point(18, 29);

            gruppa2.iconStyle.offset = new YMaps.Point(-9, -29);

 

            gruppa2.iconStyle.shadow = new YMaps.IconShadowStyle();

            gruppa2.iconStyle.shadow.href = "/i/maps/icons/photo-shadow.png";

            gruppa2.iconStyle.shadow.size = new YMaps.Point(18, 29);

            gruppa2.iconStyle.shadow.offset = new YMaps.Point(-9, -29);

gruppa2.balloonContentStyle = new YMaps.BalloonContentStyle(

            new YMaps.Template("<div style=\"color:green\">$[description]</div>"));


// Значок для группы 3

var gruppa3 = new YMaps.Style();

            gruppa3.iconStyle = new YMaps.IconStyle();

            gruppa3.iconStyle.href = "/i/maps/icons/photo.png";

            gruppa3.iconStyle.size = new YMaps.Point(18, 29);

            gruppa3.iconStyle.offset = new YMaps.Point(-9, -29);

 

            gruppa3.iconStyle.shadow = new YMaps.IconShadowStyle();

            gruppa3.iconStyle.shadow.href = "/i/maps/icons/photo-shadow.png";

            gruppa3.iconStyle.shadow.size = new YMaps.Point(18, 29);

            gruppa3.iconStyle.shadow.offset = new YMaps.Point(-9, -29);

gruppa3.balloonContentStyle = new YMaps.BalloonContentStyle(

            new YMaps.Template("<div style=\"color:green\">$[description]</div>"));


// Значок для группы 4

var gruppa4 = new YMaps.Style();

            gruppa4.iconStyle = new YMaps.IconStyle();

            gruppa4.iconStyle.href = "/i/maps/icons/photo.png";

            gruppa4.iconStyle.size = new YMaps.Point(18, 29);

            gruppa4.iconStyle.offset = new YMaps.Point(-9, -29);

 

            gruppa4.iconStyle.shadow = new YMaps.IconShadowStyle();

            gruppa4.iconStyle.shadow.href = "/i/maps/icons/photo-shadow.png";

            gruppa4.iconStyle.shadow.size = new YMaps.Point(18, 29);

            gruppa4.iconStyle.shadow.offset = new YMaps.Point(-9, -29);

gruppa4.balloonContentStyle = new YMaps.BalloonContentStyle(

            new YMaps.Template("<div style=\"color:green\">$[description]</div>"));


// Значок для геокодирования

var here = new YMaps.Style();

            here.iconStyle = new YMaps.IconStyle();

            here.iconStyle.href = "/i/maps/icons/photo.png";

            here.iconStyle.size = new YMaps.Point(18, 29);

            here.iconStyle.offset = new YMaps.Point(-9, -29);

 

            here.iconStyle.shadow = new YMaps.IconShadowStyle();

            here.iconStyle.shadow.href = "/i/maps/icons/photo-shadow.png";

            here.iconStyle.shadow.size = new YMaps.Point(18, 29);

            here.iconStyle.shadow.offset = new YMaps.Point(-9, -29);

here.balloonContentStyle = new YMaps.BalloonContentStyle(

            new YMaps.Template("<div style=\"color:green\">$[description]</div>"));


// Группы объектов


            var groups = [

                createGroup("<p class=\"stadions\">Группа 1</p>", [

                    createPlacemark(new YMaps.GeoPoint(37.538376,55.715837), "Монумент \"Родина-Мать\""),

                    createPlacemark(new YMaps.GeoPoint(37.664719,55.6949), "Памятник \"Богдану Хмельницкому\""),

                    createPlacemark(new YMaps.GeoPoint(37.605668,55.811073), "Арка Дружбы народов")

                ], "gruppa1"),


                createGroup("<p class=\"gar\">Группа 2</p>", [

                    createPlacemark(new YMaps.GeoPoint(37.444993,55.715837), "Ресторан \"Калинка-Малинка\"", "пр.Владимира Маяковского, 47"),

                    createPlacemark(new YMaps.GeoPoint(37.683945,55.685592), "Бар \"Сало-бар\"", "ул. Анри Барбюса, 5а"),

                    createPlacemark(new YMaps.GeoPoint(37.718278,55.665415), "Абсент-бар \"Палата №6\"", "бульвар Воровского, 31а"),

                    createPlacemark(new YMaps.GeoPoint(37.683945,55.756128), "Ресторан \"Спотыкач\"", "Владимирская,16")

                ], "gruppa2"),


                createGroup("<p class=\"zelenka\">Группа 3</p>", [

                    createPlacemark(new YMaps.GeoPoint(37.464219,55.719713), "Музей грамзаписи и старинных музыкальных инструментов"),

                    createPlacemark(new YMaps.GeoPoint(37.725144,55.801792), "Музей истории медицины или Анатомический театр"),

                    createPlacemark(new YMaps.GeoPoint(37.460099,55.694125), "Музей воды. Водно-информационный центр")

                ], "gruppa3"),


                createGroup("<p class=\"sportzal\">Группа 4</p>", [

                    createPlacemark(new YMaps.GeoPoint(37.788315,55.660757), "Замок Ричарда-Львиное сердце"),

                    createPlacemark(new YMaps.GeoPoint(37.483445,55.783223), "\"Дом с химерами\""),

                    createPlacemark(new YMaps.GeoPoint(37.63588,55.750707), "Дом Рыцаря")

                ], "gruppa4")

            ];


            // Создание списка групп

            for (var i = 0; i < groups.length; i++) {

                addMenuItem(groups[i], map, YMaps.jQuery("#menu"));

            }



        // Добавление одного пункта в список

        function addMenuItem (group, map, menuContainer) {

            // Показать/скрыть группу на карте

            YMaps.jQuery("<a class=\"title\" href=\"#\">" + group.title + "</a>")

                .bind("click", function () {

                    var link = YMaps.jQuery(this);

 

                    // Если пункт меню "неактивный", то добавляем группу на карту,

                    // иначе - удаляем с карты

                    if (link.hasClass("active")) {

                        map.removeOverlay(group);

                    } else {

                        map.addOverlay(group);

                    }

 

                    // Меняем "активность" пункта меню

                    link.toggleClass("active");

 

                    return false;

                })


 

                // Добавление нового пункта меню в список

                .appendTo(

                    YMaps.jQuery("<div></div>").appendTo(menuContainer)

                )

        };

 

        // Создание группы

        function createGroup (title, objects, style) {

            var group = new YMaps.GeoObjectCollection(style);

 

            group.title = title;

            group.add(objects);

            return group;

        };


        // Создание метки

        function createPlacemark (point, name, description) {

            var placemark = new YMaps.Placemark(point);

 

            placemark.name = name;

            placemark.description = description;

 

            return placemark

        }

        });


// Функция для отображения результата геокодирования

        // Параметр value - адрес объекта для поиска

        function showAddress (value) {

            // Удаление предыдущего результата поиска

            map.removeOverlay(geoResult);

 

            // Запуск процесса геокодирования

            var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()});

 

            // Создание обработчика для успешного завершения геокодирования

            YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {

                // Если объект был найден, то добавляем его на карту

                // и центрируем карту по области обзора найденного объекта

                if (this.length()) {

                    geoResult = this.get(0);

this.setStyle("here");

                    map.addOverlay(geoResult);

                    map.setBounds(geoResult.getBounds());

                }else {

                    alert("Ничего не найдено")

                }

            });

 

            // Процесс геокодирования завершен неудачно

            YMaps.Events.observe(geocoder, geocoder.Events.Fault, function (geocoder, error) {

                alert("Произошла ошибка: " + error);

            })

        };

По этому коду поиск работает, группы показываются, но вот со значками беда, указаны дефолтные :(

Как это исправить и есть ли варианты более короткого и грамотного кода, который далее можно было бы экспортировать из MySQL?

 

14 комментариев
Подписаться на комментарии к посту
Слишком много разных вариантов.
Покопайтесь в инете, найдите пример который визуально походит под ваши требования. Раскопаем как работает..

А по данному примеру - либо в createPlacemark либо в Group передайте как один из аргуменов нужную иконку.
Там и задавайте ее маркерам
Пожалуйста, скрывайте листинги кода во врезках. Сейчас я это сделал за вас.

С чем конкретно у вас возникли проблемы?
извините. Не отображаются мои иконки для меток :(
Было бы удобнее, если бы вы дали ссылку на страничку, на которой вы тестировали этот скрипт. Это возможно?
для меня это очень важно, по этому возможно :) http://vakhmistrov.ru/test.html
О! Вы передаете в createGroup имя переменой, но не саму переменую.
снимите с нее кавычки и все заработает!
Ведь надо передать YStyle а не алиасное имя шаблона стиля, которое вы к томуже и не задали
помогло, спасибо
а вот у геокодирования - не помогло:

 



geoResult = this.get(0);


this.setStyle("here");


map.addOverlay(geoResult);


map.setBounds(geoResult.getBounds());



 


ну тут такая же фигня.
надо не "here" а просто here
ну это я сделал... сначала не получилось, пока я "var here = new YMaps.Style();..." в функцию "YMaps.Events.observe" добавил. Спасибо :)
У меня родился еще вопрос:
Я задал стиль для балуна

here.balloonContentStyle = new YMaps.BalloonContentStyle(

 new YMaps.Template("$[description]"));


  и вот вместо description не знаю, что вставить, чтобы при геокодировании отображался в балуне адрес точки. Без this.setStyle(here); адрес отображается нормально
Спасибо большое, Саша! ;-)
И еще вопрос: появилась необходимость перетаскивать метку в геокодировании. Куда нужно добавить draggable: true:

 

geoResult = this.get(0);

this.setStyle("here");

map.addOverlay(geoResult);

map.setBounds(geoResult.getBounds());

 

Или это в стиле here нужно стоку прописывать какую-то?

 geoResult.setOptions( { draggable : true } );