В предыдущей заметке мы научились с Вами размещать значок маркера на карте, а также использовать для него собственное изображение.
Сейчас мы научимся добавлять на карту балун — всплывающее над картой окно с клиновидным «хвостиком», привязанное к точке.
Балун может содержать в себе как текст, так и 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
Здравствуйте, подскажите неучу, каким образом в заголовок балуна можно вывести значение из базы данных MySQL?
Заранее благодарю
Здравствуйте! Поскажите пожалуйста как вывести содержимое балуна из джава скрипта в тело страницы для индексации текста поисковыми роботами ?