Пробки

Модуль "Пробки" позволяет добавить на карту слои пробок и дорожных событий, отображающие состояние автомобильного движения в городе, а также элемент управления «Пробки».

Перед использованием модуля его необходимо подключить.

• Создание и настройка элемента управления «Пробки»
  • Опции элемента управления «Пробки»
  • Состояние элемента управления «Пробки»
  • События элемента управления «Пробки»
• Добавление слоя дорожных событий
• Примеры

Создание и настройка элемента управления «Пробки»

var traffic = new YMaps.Traffic.Control();

При создании элемента управления в конструкторе можно задать опции показа пробок и состояние элемента управления. Элемент управления «Пробки» можно добавлять на карту с помощью метода карты addControl:

map.addControl(traffic);

После выполнения этого кода в правом верхнем углу карты появится кнопка «Пробки» с отступом 5 пикселов справа и 40 пикселов сверху (положение кнопки по умолчанию).

Кнопку можно привязать к любой точке контейнера карты (подробнее см. Обычная кнопка). Например, следующий код помещает кнопку в левый нижний угол карты с отступами 5 пикселов от краев карты:

map.addControl(traffic, new YMaps.ControlPosition(YMaps.ControlPosition.BOTTOM_LEFT, new YMaps.Point(5, 5)));

Для того, чтобы отобразить пробки программно и развернуть кнопку пробок, используйте метод show:

traffic.show();

Чтобы скрыть пробки и, соответственно, свернуть кнопку, используйте метод hide. Чтобы узнать, показываются ли в данный момент пробки или нет, используйте метод isShown.

Слой пробок автоматически обновляется раз в несколько минут при наличии активности пользователя. Чтобы управлять обновлением пробок программно, используйте метод update:

traffic.update();

Смотрите также примеры создания карты и подключения слоя пробок.

Опции элемента управления «Пробки»

Кроме настройки переключателя слоя дорожных событий, для слоев пробок и дорожных событий можно задать различные реакции на действия пользователя при наведении мыши на пробку или значок дорожного события:

• cursor – вид курсора (список курсоров см. в разделе справочника YMaps.Cursor);
• hasHint – показывать ли всплывающую подсказку;
• hasBalloon – показывать ли по щелчку мыши балун.

Пример ниже отключает на слое пробок всплывающие подсказки, балун и смену курсора, а для дорожных событий устанавливает тип курсора help:

traffic.setOptions({
  layerOptions: { // Опции слоя пробок
    hasHint: false,
    hasBalloon: false,
    cursor: YMaps.Cursor.INHERIT // значение INHERIT отменяет смену курсора над пробками
  },
  infoLayerOptions: { // опции слоя дорожных событий
    cursor: YMaps.Cursor.HELP
  }
});

Для задания опций используйте метод setOptions. Также значения опций можно передать первым параметром конструктора. Для того, чтобы узнать текущие значения опций используйте метод getOptions.

Опции элемента управления также можно задавать в конструкторе.

Состояние элемента управления «Пробки»

Элемент управления «Пробки» может быть свернут (при этом показываются пробки), либо развернут (пробки скрыты). Слой дорожных событий также может быть либо показан, либо скрыт. Метод getState возвращает текущее состояние элемента управления:

// возвращает объект с полями shown (развернут ли элемент управления) и infoLayerShown (показаны ли дорожные события)
traffic.getState();

Чтобы задать состояние элемента управления, воспользуйтесь методом setState:

traffic.setState({
  shown: true, // элемент управления развернут, пробки показаны
  infoLayerShown: false // слой дорожных событий скрыт
});

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

События элемента управления «Пробки»

Элемент управления «Пробки» генерирует следующие события:

• Show – элемент развернут,
• Hide – элемент свернут,
• InfoLayerShow – показаны дорожные события,
• InfoLayerHide – дорожные события скрыты,
• StateChange – состояние элемента управления изменилось (свернут/развернут, показаны/скрыты дорожные события)

Перечисленные выше события возникают в результате действий пользователя, либо вызова методов hide, show или setState.

• Update – произошло обновление пробок.

Подробнее о событиях API см. в разделе События.

Добавление слоя дорожных событий

С помощью модуля «Пробки» можно отображать на карте слой дорожных событий, а также показывать в кнопке пробок дополнительный переключатель «Дорожные события. Переключатель позволяет пользователю карты самостоятельно включать и отключать слой дорожных событий. Добавить слой дорожных событий и переключатель можно либо в конструкторе:

var traffic = new YMaps.Traffic.Control({ showInfoSwitcher: true }, { infoLayerShown: true });

либо с помощью методов setOptions и setState:

traffic.setOptions({ showInfoSwitcher: true });
traffic.setState({ infoLayerShown: true });

Открыть пример в новом окне

Примеры

<html>
  <head>
    <title>Яндекс.Пробки</title>
    <script src="http://api-maps.yandex.ru/1.1/?key=API-ключ&modules=traffic"></script>
    <script>
      YMaps.jQuery(function () {
            // создание карты
        var map = new YMaps.Map(YMaps.jQuery('#YMapsID')[0]),
            // создание элемента управления "Пробки"
            traffic = new YMaps.Traffic.Control();
 
        // инициализация карты
        map.setCenter(new YMaps.GeoPoint(37.61,55.75), 10);
        // добавление элемента управления "Пробки" на карту
        map.addControl(traffic);
        // включение показа пробок
        traffic.show();
      });
    </script>
  </head>
  <body>
    <div id="YMapsID" style="width: 1000px; height: 600px;"></div>
  </body>
</html>

// Создает обработчик события window.onLoad
YMaps.jQuery(function () {
    // Создает экземпляр карты и привязывает его к созданному контейнеру
    var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]),
        traffic = new YMaps.Traffic.Control({   // Настройки элемента управления
            showInfoSwitcher: true,             // Показать в кнопке переключатель "Дорожные события"
            infoLayerOptions: {                 // Опции слоя дорожных событий
                cursor: YMaps.Cursor.HELP
            }
        }, {                                    // Начальное состояние элемента управления
            shown: true,                        // Немедленно включить показ пробок
            infoLayerShown: true                // Показывать слой дорожных событий
        });

    // Выставляет центр карты в центр Санкт-Петербурга
    map.setCenter(new YMaps.GeoPoint(30.313,59.939), 9);

    // Добавляет элемент управления "Пробки" на карту
    map.addControl(traffic);
})