Сейчас мы научимся добавлять на карту балун - всплывающее над картой окно с клиновидным "хвостиком", привязанное к точке.
Балун может содержать в себе как текст, так и 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>
Тогда мы увидим следующее
Посмотреть пример в действии и полный код можно здесь.
Мы можем задавать стили для отображения содержимого балуна.
За это отвечает класс 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
Комментариев нет:
Отправить комментарий