Возвращаюсь к урокам по работе в Конструкторе 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') |
все остальное берем из предыдущего примера
1 2 3 4 5 6 7 8 9 10 | 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);}; |
