Клуб API Карт

Клуб API Карт

input type="checkbox"

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

Помогите пожалуйста разобраться с кнопками. Вкратце: есть форма с checkbox кнопками и если человек ставит галочку то отображается маршрут из полилиний, снимает - убирается маршрут с карты. Реализация JavaScript API.

Посмотрел кучу примеров, но не чего похожего не нашел :(

Думаю есть 2 способа:

1)  создать сначало

pl1 = new YMaps.Polyline([ new YMaps.GeoPoint(.....

 ......

pl100 = new YMaps.Polyline([ new YMaps.GeoPoint(.....

а потом по событию кнопки добавлять

map.addOverlay(pl1); .....map.addOverlay(pl100);

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

map.removeOverlay(pl1);.... map.removeOverlay(pl100);

(тоесть работа с одним элементом по событию)

2)  Создать массив  pl[100] = new YMaps.Polyline([ new YMaps.GeoPoint(.....

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

Вот пробую http://taxi63.ucoz.ru/ только пока чтото неочень получается.

Плизз маленький примерчик.

 

5 комментариев
Авторизуйтесь, чтобы оставить комментарий
Александр Новиков
28 января 2016, 08:11
Не совсем понятно про что речь... Посмотрел ваш сайт..., надеюсь понял что вам нужно. 1. Создаете все маршруты и складываете их в массив. 2. Связываете чекбоксы и маршруты в массиве. Как вы это будете делать, выбор за вами. Например через параметр id кнопки или же сразу в обработчике onClick указывать номер маршрута в массиве. 3. При клике по кнопке либо добавляете маршрут, либо убираете его с карты.
rodlex
28 января 2016, 08:11
Маршруты можно хранить в массиве, как подсказал Вам NeWMaN.

Я на примере покажу как связать флажок и ломанную
Создадим контейнер для будущих флажков:

Флажки можно создавать с помощью, например, вот такой функции:
// Функция для создания флажка
// id - уникальный идентификатор флажка (можно генерировать программно)
// label - описание для флажка
// polyline - указатель на ломанныю
function createCheckbox (id, label, polyline) {
    // Создаем контейнер с флажком
    YMaps.jQuery('' + label + '')
        // Ищем в контейнере флажок
        .find("input")
            // Обрабатываем щелчки мыши по флажку
            .bind("click", function () {
                if (YMaps.jQuery(this).attr("checked")) {
                    map.addOverlay(polyline);
                } else {
                    map.removeOverlay(polyline);
                }
            })
            .end()
       
        // Дописываем созданный флажок в контейнер
        .appendTo(YMaps.jQuery("#menu"));
}
Пример использования этой функции:
var polyline = new YMaps.Polyline([new YMaps.GeoPoint(37.54, 55.56), new YMaps.GeoPoint(37.62, 55.73)]);
createCheckbox("polyline", "Ломанная", polyline);

var polyline2 = new YMaps.Polyline([new YMaps.GeoPoint(37.56, 55.53), new YMaps.GeoPoint(37.64, 55.78)]);
createCheckbox("polyline2", "Ломанная 2", polyline2);

Грохольский Никита
28 января 2016, 08:11

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

вот ссылка: http://www.geomonitoring.ru/egp.html

вот вопрос: Вроде сделал как вы говорили, после долгих мучений решил копипастом побороть код. YMaps.jQuery('type="checkbox"/>' + label +
'')

Проблема в том, что checkBox выводит, он работает, но label не появляется... может что не так у меня???

вот кусок кода:

        // Создание группы
        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
        }
// Группы объектов
            var groups = [
                createGroup('Оползневой', [
createPlacemark(new YMaps.GeoPoint(53.2725,83.759722), 'оползневой ','В период весеннего сезонного оттаивания грунтов, в связи с замачиванием

......................        ......................              ..........................
                createGroup('Осыпной', [
createPlacemark(new YMaps.GeoPoint(103.285,51.485556), 'обвальный, осыпной ','Вследствие резкого оттаивания грунтов на федеральной автодороге М-55 (Мангутай-Мурино) произошла сезонная активизация обвально-осыпных процессов.')
                ], "user#6"),
.................                ....................                     ...................
            ];
            // Создание списка групп
            for (var id = 0; id < groups.length; id++) {
                //addMenuItem(groups[id], map, YMaps.jQuery("#menu"));
                createCheckBox(groups[id], map, YMaps.jQuery("#menu"), groups[id]);
            }
        })
            function createCheckBox(id, map, menuContainer, group) {
            YMaps.jQuery('' + group + '')
            .find("input")
                .bind("click", function () {
                    var link = YMaps.jQuery(this);
                    if (link.attr("checked")) {
                        map.addOverlay(id);
                        } else {map.removeOverlay(id);
                        }
                })
                    .appendTo(
                   YMaps.jQuery("

").appendTo(menuContainer)
               );
            };

DosugX
28 января 2016, 08:11
Повнимательней надо быть батенька:

1) пропустил " .end()"
2) обращение неправильно было к элементам массива.
3) ну и так по мелочи, смотри изменения красным.
Усе готово, вставляешь к себе на сайт и все работает.

// Создание списка групп
for (var id = 0; id < groups.length; id++) {
   //addMenuItem(groups[id], map, YMaps.jQuery("#menu")) ;
   createCheckBox(id, map, YMaps.jQuery("#menu"), groups[id]) ;
   }
})

function createCheckBox(id, map, menuContainer, group) {
   YMaps.jQuery(' ' + group.title + '')
   .find("input")
   .bind("click", function () {
      var link = YMaps.jQuery(this) ;
         if (link.attr("checked")) {
            map.addOverlay(group) ;
         } else {map.removeOverlay(group) ;
      }
   })
   .end()
   .appendTo(YMaps.jQuery("< p>< /p>").appendTo(menuContainer));
};

Пришлось вечерок повозиться пока нашел, че да как. А сайт сам делал? Под заказ или твой?
Грохольский Никита
28 января 2016, 08:11

Спасибо, запахало... сайт делал по заказу организации, делал с товарищем.