Продолжаем работать с маркерами используя API Яндекс.Карт

Автор: | 05.04.2009

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

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

Балун может содержать в себе как текст, так и HTML-содержимое.

Одновременно на карте может быть только один балун класса YMaps.Balloon.

Для объекта YMaps.Balloon нет необходимости вызывать конструктор, он создается автоматически при вызове конструктора карты и существует в единственном экземпляре. Поэтому балун на карте может быть только один и все, что с ним можно сделать — это переместить его в другое место и сменить его содержимое.

Объект YMaps.Map предлагает метод openBalloon, который принимает на вход геоточку и DOM-элемент. DOM-элемент дописывается к контейнеру балуна.

Пример добавления:

var content = document.createElement(‘span’);

content.innerHTML = «Дворец спорта»;

map.openBalloon(new YMaps.GeoPoint(43.979459,56.291908), content);

Пример работы и полный код Вы можете увидеть здесь.

Можно добавить балун уже к существующей метке.

Мы возьмем пример из предыдущей заметки код с размещением маркера со своим значком и изменим его.

Код примера:

<!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>

<meta http-equiv=»Content-Type» content=»text/html» />

<script src=»http://api-maps.yandex.ru/0.8/?key=

AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==»

type=»text/javascript»></script>

<script type=»text/javascript» charset=»utf-8″>

var map;

function init () {

map = new YMaps.Map( document.getElementById(«YMapsID») );

map.setCenter(new YMaps.GeoPoint(44.017152,56.315455), 15,

YMaps.MapType.MAP);

var s = new YMaps.Style();

s.iconStyle = new YMaps.IconStyle();

s.iconStyle.offset = new YMaps.Point(-15, -15);

s.iconStyle.href = «files/theater.png»;

s.iconStyle.size = new YMaps.Point(30, 30);


map.addControl(new YMaps.TypeControl());

map.addControl(new YMaps.ToolBar());

map.addControl(new YMaps.Zoom());

map.addControl(new YMaps.MiniMap());

map.addControl(new YMaps.ScaleLine());

var point = new YMaps.GeoPoint(44.017152,56.315455);

var placemark = new YMaps.Placemark(point, {style: s});map.addOverlay(placemark);

}

</script>

</head>

<body onload=»init();»>

<div id=»YMapsID» style=»height:400px; width:600px;»></div>

</body>

</html>

После строки var placemark = new YMaps.Placemark(point, {style: s}); мы добавим следущий код:

placemark.setBalloonContent(‘Оперный театр им. А. С. Пушкина ‘);

Здесь в качестве содержимого балуна мы добавляем текстовую строку «Оперный театр им. А. С. Пушкина».

И после строки map.addOverlay(placemark); добавляем еще строчку

placemark.openBalloon();

Для открытия балуна.

Загружаем страницу с кодом в браузере и наблюдаем

Добавляем балун

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

Щелкнув по которому откроется балун с текстом.

Посмотреть пример в действии и полный код можно здесь.

В место строки текста можно вставить кусок HTML-кода, например,

<div style=»text-align:center»><strong>Оперный театр им. А. С. Пушкина</strong><br><img src=»/files/yanmap_z5_2.jpg» width=»200″ height=»138″ /><br>ул. Белинского, д. 59</div>

Тогда мы увидим следующее

Балун с html-содержимым

Посмотреть пример в действии и полный код можно здесь.

Мы можем задавать стили для отображения содержимого балуна.

За это отвечает класс YMaps.BalloonContentStyle.

Возьмем первый пример из данной заметки и зададим красный цвет для текста и полужирное начертание.

Порядок работы такой.

В начале мы создаем шаблон для отображения содержимого балуна и помещаем его в хранилище с ключом my#template.

var t = new YMaps.Template();

t.text = «<div style=»color:#ff000;  font-weight: bold;»>$[description]</div>»;

YMaps.Templates.add(«my#template», t);

Затем BalloonContentStyle связывается с созданным шаблоном и полученный стиль применяется к метке.

s.balloonContentStyle = new YMaps.BalloonContentStyle(«my#template»);

Заменяем строку placemark.setBalloonContent(‘<strong>Оперный театр им. А. С. Пушкина</strong>’);

на placemark.description = ‘Оперный театр им. А. С. Пушкина’;

Загружая страницу с кодом в браузере, получаем

Балун со стилем

Привожу полный код примера:

<!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>

<meta http-equiv=»Content-Type» content=»text/html» />

<script src=»http://api-maps.yandex.ru/0.8/?key=

AKgqHEkBAAAA-WzMYwIAeAeamm8ETZZZpdfp2R07eIuGyX4AAAAAAAAAAACjUCDoHIHZJ2pcl5mSL1zWVp2Myw==»

type=»text/javascript»></script>

<script type=»text/javascript» charset=»utf-8″>

var map;

function init () {

map = new YMaps.Map( document.getElementById(«YMapsID») );

map.setCenter(new YMaps.GeoPoint(44.017152,56.315455), 15,

YMaps.MapType.MAP);

var t = new YMaps.Template();

t.text = «<div style=»color:#ff0000; font-weight: bold;»>$[description]</div>»;

YMaps.Templates.add(«my#template», t);

var s = new YMaps.Style();

s.iconStyle = new YMaps.IconStyle();

s.iconStyle.offset = new YMaps.Point(-15, -15);

s.iconStyle.href = «files/theater.png»;

s.iconStyle.size = new YMaps.Point(30, 30);

map.addControl(new YMaps.TypeControl());

map.addControl(new YMaps.ToolBar());

map.addControl(new YMaps.Zoom());

map.addControl(new YMaps.MiniMap());

map.addControl(new YMaps.ScaleLine());

s.balloonContentStyle = new YMaps.BalloonContentStyle(«my#template»);

var point = new YMaps.GeoPoint(44.017152,56.315455);

var placemark = new YMaps.Placemark(point, {style: s});

placemark.description = ‘Оперный театр им. А. С. Пушкина’;

map.addOverlay(placemark);

placemark.openBalloon();

}

</script>

</head>

<body onload=»init();»>

<div id=»YMapsID» style=»height:400px; width:600px;»></div>

</body>

</html>

Посмотреть его в действии можно здесь.

Узнать подробнее о балунах можно в руководстве разработчика по адресу http://api.yandex.ru/maps/jsapi/doc/dg/concepts/balloon.xml

Продолжаем работать с маркерами используя API Яндекс.Карт: 2 комментария

  1. Александр

    Здравствуйте, подскажите неучу, каким образом в заголовок балуна можно вывести значение из базы данных MySQL?
    Заранее благодарю

  2. Павел

    Здравствуйте! Поскажите пожалуйста как вывести содержимое балуна из джава скрипта в тело страницы для индексации текста поисковыми роботами ?

Добавить комментарий для Павел Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *