Клуб API Карт

Несколько MyPolygon на карте. Кнопка в балуне к MyPolygon

Пост в архиве.
Kratit
8 апреля 2013, 12:07

Подскажите пожалуйста. 

 

Планирую наделить свою карту такой же функциональностью, как у yandex map в рамках создания, удаления и редактирования многоугольника (polygon). 

 

Подскажите, как обработать действие click внутри балуна. Например, удаление или редактирование. При условии, что на карте несколько полигонов, а действие необходимо применить именно к тому, для которого открыт балун. 

 

Спасибо. Надеюсь на помощь. 

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

Клики внутри балуна можно обрабатывать, назначая обработчики в методе build, в макете (есть пример). Также для примера можно посмотреть любую из наших статей в блоге про балуны, то как обрабатывается клик на кнопке закрытия балуна, например.

Ссылку на геообъект из макета можно получить так:

this.getData().geoObject

Спасибо. Кстати. Я видел ваш редактор для объектов карты. Можете поделиться? 

где, какой?

А, да, он правда сейчас еще сырой.

Там вообще то все открыто, смотри.

Мои кураторы в Яндексе хотят, чтобы я его в самое ближайшее время доделал,

вернее сделал из него конструктор (добавил генерацию javascript-кода)

Так что, я снова начну им заниматься прямо в ближайшие дни.

Закончу ориентировочно через 2-3 недели (конец апреля)

Мы сделаем пост в блог про него, вот такие планы.

Сырой не сырой, а работа проделана хорошая. Спасибо. 

У меня проблема. У меня по нажатию на кнопку в balloon удаляются все polygon с карты, вместо выбранного. 

 

Если не сложно, посмотрите код пожалуйста. 

 

// у меня из БД выводится список, каждому эдементу в БД привязан набор координат. По нажатию на карту добавляется полигон.

$('.poligon').bind('click', function(){

       var idDistrict = $(this).attr('id');

       $.post('/settings/thisCoordinate', {id:idDistrict}, function(data){


           var coordinate = JSON.parse(data.coordinate); // получаю из базы координаты выбранного полигона

           

           // это набор стилей для самого полигона

           var color_polygon = $('#color_polygon').attr('value');

           var opacity_polygon = $('#fillopacity_polygon').attr('value');

           var width_line = $('#width_line').attr('value');

           var color_line = $('#color_line').attr('value');

           

           // функция для вывода создания и вывода полигона

           createPoligon(coordinate, color_polygon, color_line, opacity_polygon, width_line, data.name, data.id); 

       }, 'JSON');

       

       

       // а вот и сама функция

       function createPoligon(thisCoordinate, color_polygon, color_line, opacity_polygon, width_line, name, id){

            var MyPolygonName = [];

            

        

           MyPolygonName['pol'+id] = new ymaps.Polygon( thisCoordinate, {

                balloonContentHeader: ''+name+'',

                balloonContentBody: '',

           }, {

                        fillColor: color_polygon,

                        strokeColor: color_line,

                        opacity: opacity_polygon,

    strokeOpacity: opacity_polygon,

                        strokeWidth: width_line,

                        draggable: true

           });

           

            myMap.geoObjects.add(MyPolygonName['pol'+id]);

            MyPolygonName['pol'+id].editor.stopEditing();

            

            

            

            $('.delMyPolygon').live('click', function(){

                myMap.geoObjects.remove(MyPolygonName['pol'+id]);

            });

            

            $('.editMyPolygon').live('click', function(){

                MyPolygonName['pol'+id].editor.startDrawing();

                MyPolygonName['pol'+id].balloon.close();

            });

            

            $('.editEndMyPolygon').live('click', function(){

                MyPolygonName['pol'+id].editor.stopEditing();

                MyPolygonName['pol'+id].balloon.close();

            });

            

       }



balloonContentBody: '', - оставил пустым, преобразовывается ((( Там у меня span теги, для них прописаны классы, а обработчик клика по ним в коде выше (delMyPolygon, editMyPolygon, editEndMyPolygon)   - удаление, редактирование, выход из режима редактирования

Я всё же настоятельно рекомендую тебе использовать макеты. Это рекомендованный разработчиками АПИ способ решать подобные задачи.

В макете ты будешь работать только с одним полигоном и его данными и подобных проблем никогда не возникнет.

А всякие live это очень плохой вариант. Ты их создаешь, не удаляешь, а память течет и течет...

 

И попробуй использовать ООП чтоли.

Писать весь код внутри обработчика AJAX это конечно не гуд

Да, надо переходить на новый уровень. Спасибо. 

Создал макет: 

 

// предварительно созданный макет balloon

var myBalloonContentLayoutClass = ymaps.templateLayoutFactory.createClass('test');

ymaps.layout.storage.add('my#simplestBCLayout', myBalloonContentLayoutClass);

// кнопка включает и выключет редатиктирование конкретного полигона        var myButton = new ymaps.control.Button('Район');        myButton.events            .add('click', function () {  }) // нажали на кнопку             .add('select', function () {  // кнопка нажата                                           // подкодключаем стили для будущего многоугольника                     ................// начинаем создавать многоугольник с места клика            myPolygon = new ymaps.Polygon( [ [  ] ],                    {                        // подключаю макет                        balloonContentLayout: 'my#simplestBCLayout',                    },           {                         // описание опций полигона           });

 ...............

 Этот варинат к сожалению не рабочий, макет не подключился. выводит вместо слова "TEST" название ключа. Подскажите пожалуйста, как правильно.

макет надо передавать в опциях (третий параметр), а не в данных (второй параметр)

оооо, работает. спасибо. 

В коде твоего редактора не могу найти обработчик завершения создания многооугольника. т.е. начинаю рисовать, первая, втора, третья точка, потом жмакаю по точке и появляется контекстное меню. Один из элементов меню "Завершить". Подскажи пожалуйста, как обработать данное событие для многоугольника (полигон)? Спасибо. 

у редактора геометрии есть state, надо слушать на нем "change"

и смотреть на его значения editing == false

чего-то не работает (( 

 

 

myPolygon.events.add('statechange', function () {                        if (myPolygon.editor.state.get('editing') == false) {                                               // редактирование было выключено                           myPolygon.editor.stopEditing();                            myPolygon.balloon.open();                                            }                                        });

нее

кажется так:

myPolygon.editor.state.events.add('change', ...

ты смотри в доку всегда.

очень экономит время

Да я с большой радостью туда смотрю, но почему-то всё время не нахожу там ответа. :-|

Просидел весь вечер. Не работает:

 

                    myPolygon.editor.state.events.add('change', function (e) {
                           if(e.get('editing') === false){
                                myPolygon.balloon.open();
                           }
});

 

ещё вот так пробовал:

 

if(myPolygon.editor.state.get('editing') === false){
e.get('target').get('editing')
подключи апи в режиме дебаг и ты сможешь смотреть в консоли что приходит в объекте события

ооо, понял, спасибо. 

и === false не надо писать =)

Это я уже понял. Убрал. Спасибо. Только теперь не понятно. У меня эта запись e.get().get() возвращает true для всех элементов меню ЗАВЕРШИТЬ, ПРОДОЛЖИТЬ, УДАЛИТЬ. У меня собственно вопрос был, как обработать конкретный пункт меню. И вопрос по поводу макетов. Я в build сейчас попробовал обработать несколько кнопок, которые разместить в balloon, но обрабатывается только первая. Та же проблема у меня в обработчике 

 

myPolygon.editor.state.events.add('change', function (e) {

 

в {} я могу написать только одно действие, например закрыть открытый balloon, какое нибудь другое, например закончить редактирование myPolygon.editor.stopEditing(); уже не сработает. 

Полный пример :

 

myPolygon.editor.state.events.add('change', function (e) {                           // обработка кнопки "завершить" в меню редактора полигона                           if(e.get('target').get('editing') ){                                myPolygon.balloon.open();                                myPolygon.editor.stopEditing();                           } });

Данная кобинация к сожалению не работает.

 

Ничего не сделал, но проблема ушла. Всё работает. Полтергейст какой-то. Извините. 

 

Это я уже понял. Убрал. Спасибо. Только теперь не понятно. У меня эта запись e.get().get() возвращает true для всех элементов меню ЗАВЕРШИТЬ, ПРОДОЛЖИТЬ, УДАЛИТЬ. У меня собственно вопрос был, как обработать конкретный пункт меню.

Этот вопрос остался открытым

посмотри доку на редактор.
там есть описание всех полей в его state

http://api.yandex.ru/maps/doc/jsapi/2.x/ref/reference/geometryEditor.Polygon.xml#state

 

К сожалению не нашёл ответа на свой вопрос. И кстате, спасибо за терпение. )) 

чтобы обработать конец редактирования нужно слушать изменение state редактора и проверять значения в этом state