Клуб API Карт

Балун с возможностью редактирования.

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

Необходимо сделать балун, что бы нём было поле для редактирования и кнопка ок, что бы пользователь мог редактировать его содердимое. При нажатии кнопки ок изменённая информация сохранялась в балуне. Что бы при следующем открытии отображалась изменённая информация.

Вообщем надо сделать так же как в яндекс конструкторе карт https://tech.yandex.ru/maps/tools/constructor/.

5 комментариев
Всеволод Шмыров
27 января 2016, 22:43
Добрый день. Вам необходимо создать собственный макет балуна, а уже в нем реализовать любую логику. Хороший пример в песочнице https://tech.yandex.ru/maps/jsbox/2.1/placemark_balloon_layout
Всеволод Шмыров
27 января 2016, 22:43
Изменять опции геообъекта внутри балуна можно при помощи конструкции this.getData().geoObjects.options.set(...

а как узнать какая кнопка нажата если их несколько ?

Всеволод Шмыров
27 января 2016, 22:43
Сложно ответить, когда не видишь код. Можете сделать стенд на jsfiddle?

Ну за основу взял пример по ссылке которую вы мне кинули.

        // Создание макета содержимого балуна.

        // Макет создается с помощью фабрики макетов с помощью текстового шаблона.

        BalloonContentLayout = ymaps.templateLayoutFactory.createClass(

 

''+

   'Наименование геозоны:
'+

   '
'+

'Краткое описание:
'+

'
'+

'Раадиус окружности:
'+

'
'+

'Координаты центра: 5.5, 7,7
'+

''+

''+

' Ок '+

' Редактировать '+

' Удалить '+

''

, {

 

            // Переопределяем функцию build, чтобы при создании макета начинать

            // слушать событие click на кнопке-счетчике.

            build: function () {

                // Сначала вызываем метод build родительского класса.

                BalloonContentLayout.superclass.build.call(this);

                // А затем выполняем дополнительные действия.

                //$('#counter-button').bind('click', this.onCounterClick);

 

$('#bOk').bind('click', $.proxy(this.onCounterClick, this, button = 1));

$('#bEdit').bind('click', $.proxy(this.onCounterClick, this, button = 2));

$('#bDelete').bind('click', $.proxy(this.onCounterClick, this, button = 3));

                //$('#count').html(counter);

            },

 

            // Аналогично переопределяем функцию clear, чтобы снять

            // прослушивание клика при удалении макета с карты.

            clear: function () {

                // Выполняем действия в обратном порядке - сначала снимаем слушателя,

                // а потом вызываем метод clear родительского класса.

                //$('#counter-button').unbind('click', this.onCounterClick);

$('#bOk').unbind('click', this.onCounterClick);

$('#bEdit').unbind('click', this.onCounterClick);

$('#bDelete').unbind('click', this.onCounterClick);

                BalloonContentLayout.superclass.clear.call(this);

            },

 

            onCounterClick: function (e) {

console.log(e); //нажата кнопка

//$('#count').html(counter);//сохранить

console.log($('#count').val());

//console.log(this.getData().geoObject.options.getAll());

            }

Вообщем я с этим разобрался, сейчас другой вопрос, как при нажатии кнопки ок, балун зарывался и вся изменённая информация в нём сохранялась. Я имеюю ввиду в едитах.