Блог API Яндекс.Карт

Официальные инструменты Яндекс.Карт — API 1.x

-----

Эта статья относится к API Яндекс.Карт 1.x. Рекомендуем почитать аналогичную инструкцию для новой версии API — 2.0.

-----

API Яндекс.Карт используется для реализации множества различных сервисов: от простых схем проезда до почти полноценных ГИС. В зависимости от сложности решаемой задачи и «динамичности» данных, отображаемых на карте, используется свой подход и инструменты.

Схемы проезда обычно не меняются, а создаются один раз на продолжительный промежуток времени (например, до переезда офиса). Поэтому для их создания удобно воспользоваться визуальным инструментом «Конструктор схем проездов", который позволяет разметить необходимые объекты на карте и получить готовый код для вставки на страницу.

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

Сервис «Мои карты» позволяет отмечать на карте метки, изменять их внешний вид и описание, после чего можно поделиться ссылкой на созданную карту с друзьями. Карту, созданную в вышеописанном сервисе, можно разместить и у себя на сайте. Для этого необходимо воспользоваться возможностью экспорта объектов, размеченных на карте, в виде YMapsML. Более подробно про экспорт YMapsML можно прочитать в этом топике.

Чтобы добавить YMapsML-документ на карту, необходимо после ее инициализации вставить следующую строку (необходимо подставить свой URL):

Посмотреть пример на отдельной странице

Объекты, размещенные на карте таким образом, можно редактировать через интерфейс «Моих карт». Другими словами все изменения, внесенные в карту на Яндекс.Картах, автоматически отразятся в соответствующем YMapsML.

При добавлении YMapsML-документа из "Моих карт" центр и масштаб карты подбирается таким образом, чтобы все добавленные метки были видны на карте. Такое поведение можно изменить, если при создании YMapsML в конструктор передать параметр viewAutoApply со значением false. 

map.addOverlay(

    new YMaps.YMapsML("http://maps.yandex.ru/export/usermaps/DwSVPt66C9uouT5tN_0YgE-D23KX7rM0/", {

        viewAutoApply : false

    })

Посмотреть пример на отдельной странице 

После окончания загрузки YMapsML-документа можно поменять внешний вид значков. Для этого необходимо создать обработчика события Load и в нем вызвать метод setStyle() для группы, в которой размещены метки:

var ml = new YMaps.YMapsML("http://maps.yandex.ru/export/usermaps/DwSVPt66C9uouT5tN_0YgE-D23KX7rM0/");

map.addOverlay(ml);

 

YMaps.Events.observe(ml, ml.Events.Load, function (ml) {

    ml.get(0).setStyle("default#mushroomIcon");

} 

Посмотреть пример на отдельной странице 

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