Возвращаюсь к урокам по работе в Конструкторе Yandex Карт. Достаточно простой урок и необходимая фича: показать на сайте уровень пробок в Вашем городе. При этом элемент контроля: trafficControl(Пробки) не всегда необходим. Особенно если карта будет маленькая.

Приступим. Откроем конструктор и найдем ту часть города, на которой мы хотели бы показать пробки. 

Тут есть два варианта: первый, просто перетащить на карту элемент управления "пробки", второй, подключить слой пробок руками. Так как, часто элемент управления не нужен то обойдемся без него.

Находим в инспекторе объектов (правый верхний блок) элемент Карта. И кликаем на него. В левом блоке свойств объекта переходим на вкладку События. И нажимаем на + на против события onready

Если все верно, то внизу конструктора откроется текстовый редактор. С такой заготовкой

events.map1_ready = function(){

};

это событие не стандартное и не является частью Yandex Maps API. Оно создано для конструктора и вызывается, в тот момент когда карта уже создана. Причем, сама карта доступна внутри этого события как this

Теперь осталось инициализировать слой пробок и подключить его к карте. Такой пример есть в документации

events.map1_ready = function(){
    var trafficControl = new ymaps.control.TrafficControl({shown: true},{visible:false});
    this.controls.add(trafficControl,{left:3,top:3});
    function updateProvider () {
         trafficControl.getProvider('traffic#actual').update();  
    }
    // Будем слать запрос на обновление данных каждые 4 минуты.
    window.setInterval(updateProvider, 4 * 60 * 1000);
};

Как вы можете заметить. мы тоже подключаем элемент управления trafficControl, однако мы делаем его невидимым. В конце, мы запускаем обновление, каждые 4 секунды.

Карта готова к использованию

Но, зачем же все таки создавать "|контрол" в ручную. Давайте для демонстрации работы конструктора, проделаем тоже самое с элементом управления Пробки. Перетащите его на карту. Он находится в вкладке элементы управления в верхней части конструктора.

Теперь, в карте он будет доступен так 

this.controls.get('trafficControl')

все остальное берем из предыдущего примера

events.map1_ready = function(){
    var trafficControl = this.controls.get('trafficControl');
    trafficControl.options.set({visible:false});
    trafficControl.state.set('shown', true);
    function updateProvider () {
         trafficControl.getProvider('traffic#actual').update();  
    }
    // Будем слать запрос на обновление данных каждые 4 минуты.
    window.setInterval(updateProvider, 4 * 60 * 1000);
};

Смотрим результат 

Рассказать друзьям

Добавить комментарий


Защитный код
Обновить