Изменение параметров метки

Open in CodeSandbox

В этом примере обрабатывается событие геообъекта - щелчок правой кнопкой мыши на метке, и отображется контекстное меню для управления его свойствами. 

<!DOCTYPE html>
<html>
    <head>
        <title>Изменение параметров метки</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script
            src="https://yandex.st/jquery/2.2.3/jquery.min.js"
            type="text/javascript"
        ></script>
        <script
            src="geoobject_contextmenu.js"
            type="text/javascript"
        ></script>
        <style type="text/css">
            html,
            body {
                width: 100%;
                height: 95%;
                margin: 0;
                padding: 0;
                font-family: Arial;
                font-size: 14px;
            }

            #map {
                width: 100%;
                height: 95%;
            }

            #menu {
                position: absolute;
                width: 12em;
                background: white;
                border: 1px solid #ccc;
                border-radius: 12px;
                padding-bottom: 10px;
                z-index: 2;
            }
            #menu ul {
                list-style-type: none;
                padding: 20px;
                margin: 0;
            }
            input {
                width: 10em;
            }

            .header {
                padding: 5px;
            }
        </style>
    </head>

    <body>
        <p class="header">Вызовите контекстное меню на метке</p>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    // Создаем карту.
    var myMap = new ymaps.Map(
        "map",
        {
            center: [47.6, 41.8],
            zoom: 9,
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    // Создаем метку.
    var myPlacemark = new ymaps.Placemark(
        [47.6, 42.1],
        {
            iconContent: "Щелкни по мне правой кнопкой мыши!",
        },
        {
            // Красная иконка, растягивающаяся под содержимое.
            preset: "islands#redStretchyIcon",
        }
    );

    // Контекстное меню, позволяющее изменить параметры метки.
    // Вызывается при нажатии правой кнопкой мыши на метке.
    myPlacemark.events.add("contextmenu", function (e) {
        // Если меню метки уже отображено, то убираем его.
        if ($("#menu").css("display") == "block") {
            $("#menu").remove();
        } else {
            // HTML-содержимое контекстного меню.
            var menuContent =
                '<div id="menu">\
                    <ul id="menu_list">\
                        <li>Название: <br /> <input type="text" name="icon_text" /></li>\
                        <li>Подсказка: <br /> <input type="text" name="hint_text" /></li>\
                        <li>Балун: <br /> <input type="text" name="balloon_text" /></li>\
                    </ul>\
                <div align="center"><input type="submit" value="Сохранить" /></div>\
                </div>';

            // Размещаем контекстное меню на странице
            $("body").append(menuContent);

            // Задаем позицию меню.
            $("#menu").css({
                left: e.get("pagePixels")[0],
                top: e.get("pagePixels")[1],
            });

            // Заполняем поля контекстного меню текущими значениями свойств метки.
            $('#menu input[name="icon_text"]').val(
                myPlacemark.properties.get("iconContent")
            );
            $('#menu input[name="hint_text"]').val(
                myPlacemark.properties.get("hintContent")
            );
            $('#menu input[name="balloon_text"]').val(
                myPlacemark.properties.get("balloonContent")
            );

            // При нажатии на кнопку "Сохранить" изменяем свойства метки
            // значениями, введенными в форме контекстного меню.
            $('#menu input[type="submit"]').click(function () {
                myPlacemark.properties.set({
                    iconContent: $('input[name="icon_text"]').val(),
                    hintContent: $('input[name="hint_text"]').val(),
                    balloonContent: $('input[name="balloon_text"]').val(),
                });
                // Удаляем контекстное меню.
                $("#menu").remove();
            });
        }
    });

    myMap.geoObjects.add(myPlacemark);
}