Модули API

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

• активные области — позволяет размещать на карте большое количество объектов без потери производительности;
• метро — позволяет искать ближайшие станции метро в указанной области;
• дизайн-модуль «PlainStyle» — дополнительные стили для меток, балунов и подсказок;
• регионы — информация о территориальном делении стран;

Как вы поняли, нам понадобиться модуль PlainStyle. Любой модуль можно подключить либо вместе со скриптом карт (параметр modules):

<script type="text/javascript" src="http://api-maps.yandex.ru/1.1/?key=API-ключ&amp;modules=plainstyle" charset="utf-8"></script>

либо в нужное время в нужном месте:

YMaps.load("plainstyle", callback);

Метки

Установка метки

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

var coords = new YMaps.GeoPoint(37.609218,55.753559),
placemark = new YMaps.Placemark(coords);
map.addOverlay(placemark);

А чтобы поставить метку по указанном адресу необходимо сделать так:

var geocoder = new YMaps.Geocoder("Россия, Москва, ул. Тверская, д. 43"); 
YMaps.Events.observe(geocoder, geocoder.Events.Load, function (geocoder) {
    var geoCoords = geocoder.get(0).getGeoPoint(),
    geoPlacemark = new YMaps.Placemark(geoCoords);
    map.addOverlay(geoPlacemark); 
});

Ну вот, теперь мы умеет ставить метку на карту, переходим к ее настройке.

Настройка метки

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

// Создаем собственную метку
var s = new YMaps.Style(); // Создаем стиль	
s.iconStyle = new YMaps.IconStyle(); // Создает стиль значка метки
s.iconStyle.href = "target.png"; // Указываем путь к картинке
s.iconStyle.size = new YMaps.Point(16, 16); // Размеры картинки
s.iconStyle.offset = new YMaps.Point(-8, -8); // Сдвиг
var ownPlacemark = new YMaps.Placemark(coords, { 
    style: s // Указываем какой стиль применить
});
map.addOverlay(ownPlacemark);

Еще можно указывать настройки для тени, но я не стал их тут делать — при необходимости вы можете сделать это сами по аналогии.

Теперь рассмотрим как использовать встроенные стили. В приведенном выше коде мы использовали параметр style при создании маркера — он указывает какой стиль применить. Так вот, чтобы использовать готовые шаблоны необходимо просто указать название готового в этом же параметре. Вот список встроенных в API стилей и список подключаемых в модуле. Все довольно неплохие ;-)

Теперь посмотрим другие параметры метки. Так, чтобы указать в самом значке метки какой-то текст или HTML код, нужно написать вот так:

placemark.setIconContent('Что-то');

У метки так же есть параметр, отвечающий за наличие у нее балуна (hasBaloon), указатель стиля (style), перетаскиваема ли метка (draggable) и настройки подсказки (hintOptions). С полным список вы можете ознакомиться на странице описания настроек метки.

Балуны

Балуны это такие вплывающие окна. Самый простой способ сделать балун — определить его вместе с меткой:

var coords = new YMaps.GeoPoint(37.609218,55.753559),
placemark = new YMaps.Placemark(coords);
placemark.name = "Имя метки"; // Заголовок балуна
placemark.description = "Описание метки"; // Текст балуна
map.addOverlay(placemark);

Тут так же можно указать, нужна ли балуну кнопка закрытия (парамерт hasCloseBallon), двигать ли карту, что он влез полностью в видимую область (mapAutoPan), величину максимального отступа от границ карты (margin), максимальную высоту и ширину (maxWidth и maxHeight) и настройки стиля (style).

Когда вы задаете стили для метки из готовых (через style), то стили так же наследуются и балуном.

Заключение

Подведем итог. Сегодня мы научились создавать метки и балуны для Яндекс.Карт. Мы так же посмотрели как задать им нужный нам стиль и рассмотрели некоторые другие парамерты. Все, что было рассмотрено в статье, можно посмотреть в примере к статье:

Пример к статье