Элементы управления

Open in CodeSandbox

Элемент управления — визуальный объект, позволяющий пользователю управлять картой (например, перемещать карту, изменять её тип или коэффициент масштабирования).

Каждый элемент управления реализуется отдельным классом из пространства имен control (например, control.Button или control.MiniMap).

Ссылка на элементы управления содержится в поле controls карты. С его помощью производится добавление и удаление элементов управления на карту. При добавлении элемента управления указывается либо экземпляр соответствующего класса, либо строковый идентификатор элемента управления (например, 'zoomControl').

Положения элементов управления на карте можно изменять. 

<!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.0/?load=package.standard,package.traffic&amp;lang=ru-RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>

        <script src="controls.js" type="text/javascript"></script>
    </head>

    <body>
        <div id="map" style="width:400px; height:300px"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map("map", {
        center: [56.136, 40.39],
        zoom: 10,
    });

    // Для добавления элемента управления на карту
    // используется поле map.controls.
    // Это поле содержит ссылку на экземпляр класса map.control.Manager.

    // Добавление элемента в коллекцию производится
    // с помощью метода add.

    // В метод add можно передать строковый идентификатор
    // элемента управления и его параметры.
    myMap.controls
        // Кнопка изменения масштаба.
        .add("zoomControl", { left: 5, top: 5 })
        // Список типов карты
        .add("typeSelector")
        // Стандартный набор кнопок
        .add("mapTools", { left: 35, top: 5 });

    // Также в метод add можно передать экземпляр класса элемента управления.
    // Например, панель управления пробками.
    var trafficControl = new ymaps.control.TrafficControl();
    myMap.controls
        .add(trafficControl)
        // В конструкторе элемента управления можно задавать расширенные
        // параметры, например, тип карты в обзорной карте.
        .add(
            new ymaps.control.MiniMap({
                type: "yandex#publicMap",
            })
        );

    /*
    // Удаление элементов управления производится через метод remove.
    myMap.controls
        .remove(trafficControl)
        .remove('mapTools');
    */
}