Элементы управления Яндекс.Карт (controls)

project author

Если Вам понравился данный материал, поделитесь им с вашими друзьями в соц сетях


Элемент управления — визуальный объект, связанный с картой и предназначенный для взаимодействия с пользователем.

В большинстве случаев элементы управления размещаются в области показа карты.

API карт включает в себя несколько встроенных наборов элементов управления (для маленьких, средних и больших карт) и предоставляет возможность расположить элементы управления произвольным образом, а также реализовать собственный элемент управления.

Элементы управления автоматически адаптируются под размер карты и параметры устройства.

Набор элементов управления, которые добавляются на карту при ее создании, указывается в конструкторе карты. По умолчанию будет подключен набор 'default', состоящий из элементов управления:

  • поисковая строка (searchControl)
  • выбор типа карты (typeSelector)
  • полноэкранный режим (fullscreenControl)
  • ползунок масштаба (zoomControl)
  • геолокация (geolocationControl)
  • кнопка "Пробки" (trafficControl)

Элементы управления программно связаны с объектом карты и хранятся в виде коллекции, ссылка на которую содержится в поле controls.

элементы управления Яндекс.Карт (controls)

 

Указываем элементы управления при инициализации карты

создаем карту указывая элементы управления

<script type="text/javascript">
var myMap;
// при успешной загрузке API выполняется соответствующая функция
ymaps.ready(function(){
    // создание экземпляра карты и его привязка к контейнеру с id="map"
    myMap = new ymaps.Map("map", {
        // центр карты
        center: [55.75396, 37.620393],
        // коэффициент масштабирования
        zoom: 8,
        // тип карты, по умолчанию используется тип карты "схема"
        //type: "yandex#map",
        // подключаем элементы управления: "по умолчанию"
        controls: ["default"]
        // или так - подключаем элементы управления: "по умолчанию" и редактор маршрутов routeEditor
        controls: ["default", "routeEditor"]
        // или так - подключаем элементы управления: zoomControl, zoomControl, fullscreenControl
        controls: ["zoomControl", "zoomControl", "fullscreenControl"]
        // или так - отключаем все элементы управления
        controls: []
    });
    // ...
    // код работы с элементами управления Яндекс.Карты
    // ...
}); // end ymaps.ready
</script>

 

Наборы элементов управления

Набор Описание Пример
smallMapDefaultSet Набор предназначенный для маленьких (менее 300 пикселей в ширину) карт controls: ["smallMapDefaultSet"]
mediumMapDefaultSet или default Набор предназначенный для стандартных (от 300 до 1000 пикселей в ширину) карт controls: ["default"]
largeMapDefaultSet Набор предназначенный для больших (более 1000 пикселей в ширину) карт controls: ["largeMapDefaultSet"]

 

Элементы управления Яндекс.Карт

Пример Элемент управления Описание
geolocationControl geolocationControl Геолокации
searchControl searchControl Поисковая строка
routeEditor routeEditor Редактора маршрута
zoomControl zoomControl Ползунок масштаба
fullscreenControl fullscreenControl Полноэкранный режима
trafficControl trafficControl Пробки
typeSelector typeSelector Тип карты
rulerControl rulerControl Измерение расстояний

 

Изменение элементов управления карты после ее создания

Рассмотрим методы для изменения элементов управления карты.

рассмотрим методы для работа с элементами управления на примере zoomControl

// ...
// код работы с элементами управления Яндекс.Карты
// ...

// включаем элемент управления zoomControl
myMap.controls.add("элемент управления");
т.е.
myMap.controls.add("zoomControl");

// отключение элемент управления карты
myMap.controls.remove("zoomControl");

 

Пример с элементами управлениями карты

 

 


  Теги: API Яндекс.Карт