A
A
Alibek True Story2015-04-08 15:20:19
Yandex
Alibek True Story, 2015-04-08 15:20:19

How to create a Yandex map with the ability to add labels with parameters and edit them?

It is not possible to make it possible to add several labels, and when adding it, its parameters appear in the balloon in the form of an html input / select tag and save it when the button is pressed. And each label so that you can edit it. Yandex version 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;
    });

};

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question