25 августа 2010 года компанией Яндекс было заявлено о возможности добавления карты пробок на любой сайт, с использованием API Яндекс.Карт.
О б этом я уже писал на своем блоге «Карту пробок от «Яндекса» можно вставить на любой веб-сайт».
В этой заметке я хочу подробно познакомить Вас с тем как это можно сделать.
Нам понадобиться пример кода для вывода карты с элементами управления.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Яндекс.Карта с элементами управления</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
var map;
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(43.998779,56.316537), 14);
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.SearchControl());
map.addControl(new YMaps.ToolBar());
});
</script>
</head>
<body>
<div id="YMapsID" style="width:800px; height:600px;"></div>
</body>
</html> |
Теперь добавим на нашу карту слой с пробками.
Для этого в начале, необходимо подключить специальный модуль traffic.
Сделать это можно указав в строке подключения API дополнительный параметр modules со значением traffic:
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==&modules=traffic" type="text/javascript"></script> |
Если у Вас уже был подключен ранее какой-либо модуль, для того чтобы подключить еще один нужно разделить название модулей символом ~.
Например, Вы уже использовали модуль «Активные области», тогда строка подключения API будет иметь вид:
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==&modules=hotspots~traffic" type="text/javascript"></script> |
Далее мы создаем элемент управления Пробки и добавляем его на карту.
За это отвечают строки
// создание элемента управления "Пробки"
var traffic = new YMaps.Traffic.Control();
// добавление элемента управления "Пробки" на карту
map.addControl(traffic);
Для отображения пробок на карте нужно добавить еще одну строку
// включение показа пробок
traffic.show();
Посмотреть пример в действии и исходный код
Подробнее об использовании модуля «Пробки» можно прочитать по адресу http://api.yandex.ru/maps/jsapi/doc/mod/traffic/concepts/About.xml
спасибо вам за статью!
Скажите, пожалуйста, а как можно реализовать поиск по городам на яндекс.пробки?
И если не сложно, с примером для уже имеющегося кода. Я понимаю, выглядит как наглость, но это будет полезно не только мне, но и пользователям, а так же и вашему ресурсу!
Заранее спасибо