@TrueSt
Programmer

Как создать яндекс карту с возможностью добавление меток с параметрами и их редактирование?

Не получается сделать так чтобы можно было добавлять несколько меток, а при добавлений выходит в балуне ее параметры в виде тэг html input/select и сохранял его при нажатий кнопки. И каждую метку чтоб можно было редактировать. Версия яндекса 2.1

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
        center: [43.2369, 76.9149],
        zoom: 13
    }, {
        balloonMaxWidth: 200
    });

    myMap.events.add('click', function (e) {

        var coords = e.get('coords');

        if (!myMap.balloon.isOpen()) {
            myMap.balloon.open(coords, {
                contentBody: '<div id="menu">\
                                     <div id="menu_list">\
                                        <label>Адрес:</label> <input id= "address" type="text" class="input-medium" name="address" /><br />\
                                         <label>Комментарий:</label> <input id = "comment" type="text" class="input-medium" name="comment" /><br />\
                                         <label>Статус:</label> <br><select id = "status" name = "status">\
                                             <option value = "0"> Не посещено </option>\
                                             <option value = "1"> Посещено </option>\
                                             <option value = "2"> Не снято показание </option>\
                                             <option value = "3"> Снято показание </option>\
                                         </select><br /></div>\
                                         <br><button type="button" class="btn btn-success">Сохранить</button>\
                                         </div>'
            });
        } else {
            myMap.balloon.close();
        }

    });

    $('#menu button[type="button"]').click(function () {
        alert("clicked");
        var status = $('#menu select[id = "status"]').value();
        var text = $('#menu input[id = "address"]').val() + "<br>" + $('#menu input[id = "comment"]').val();

        myPlacemark = new ymaps.Placemark(coords, {
            balloonContent: text,
            hintContent: status
        });

        myMap.geoObjects.add(myPlacemark);
        myMap.balloon.close();
        return;
    });

};
  • Вопрос задан
  • 246 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы