Яндекс.Карты, статья №2: Метки и балуны

Яндекс.Карты, статья №2: Метки и балуны

Всем привет!

Продолжаем разговор о Яндекс.Картах. Сегодня мы рассмотрим два так называемых объекта-оверлея, которые используются на картах — метки (маркеры) и балуны.

В этой статей мы посмотрим как создавать метки на карте по заданным координатам или адресу (например, адресу дома), как к этим меткам привязывать балуны или располагать балуны независимо от маркеров.

Мы так же рассмотрим как использовать возможности некоторых модулей API Яндекс.Карт и с их помощью настраивать внешний вид меток и балунов. 

Модули 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), то стили так же наследуются и балуном.

Заключение

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

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

Расскажите друзьям

Оцените статью:
  • 1
  • 2
  • 3
  • 4
  • 5

Комментарии — 19

naikom design blog
спасибо)) но неплохо бы ещё про карты гугл такой же материал) по-моему они более актуальны)
Event 007
Почему более актуальны? Вот (посмотреть можно на http://bankomator.ru) тут Яндекс.карты проявили себя более технологино))
Grin
Статьи по Гуглокартам у нас есть, посмотрите
Евгений
присоединяюсь к пожеланиям naikom design blog хотелось бы и google? а так спасибо
Антон
Спасибо за статью, пригодится... Соглашусь с Event 007, что нужно выбирать в зависимости от конкретных задач, и соглажусь с грином что по гугл картам статьи тут есть. Спасибо, Паш, за статью.
#
Антон
Flip:Who?
Временно.нет укрощает Яндекс! :)
Интересная статейка, будем юзать
house-build
Полезная инфа, спасибо!
as59
спасибо. пошел практиковаться..
qatro
спасибо за пример и описание.
darya
Инфа - то, что надо. Мне вообще этот сайт нравится, я тут постоянно для себя что-то новенькое узнаю и черпаю постоянно!
Денисов Вячеслав
Стоит отметить, что у Яндекса города России лучшего качества, чем у Google. По крайне мере мой город в Яндеке намного лучшего качества, чем в Гугл, наверно и с другими городами так же.
Строитель
По многим городам Яндекс.карты в точности делает гугл.карты и это большой минус для гугла и плюс для яндекса. Спасибо за материал!
TenDer
Блин, на самом деле все так просто. Буду пробовать, на многих сайтах можно установить
Airlife
На сайте использую gmapez, есть желание перейти на карты яндекса есть ли что-то похожие?
Алексей
Неплохо бы еще увидеть подборку иконок для Яндекс/Google карт
#
Алексей
Олег
"А чтобы поставить метку по указанном адресу необходимо сделать так:"

и вы ввели сами адрес, а как сделать так, чтобы в это поле передавался адрес!?
помогите пожалуйста, конечно понимаю, что скорее это более по яваскрипт вопрос ) но всё же !
#
Олег
Олег
всё разобрался )
#
Олег
Олег
спасибо большое !)
#
Олег
Дмитрий
Согласен с Алексеем - неплохо бы опубликовать подборку иконок... У меня их поиск вызывает затруднения!!

Новый комментарий

как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
как выглядит какой тег
жирный текст <b>жирный текст</b>
курсивный тект <i>курсивный тект</i>
зачеркнутый текст <s>зачеркнутый текст</s>
подчеркнутый текст <u>подчеркнутый текст</u>
ссылка <a href="адрес">ссылка</a>
function foo() { ... }
<pre><code>function foo() { ... } </code></pre>
разрешенные теги или посмотреть как будет выглядеть
google reklam metin2 pvp serverler en son metin2 pvp serverler mt2 pvp pvp serverlar