Изучаем работу с балунами, используя API Яндекс.Карт версии 2.х

Автор: | 24.05.2012

В этой заметке я продолжаю свой рассказ об особенностях использования API Яндекс.Карт версии 2.х начатой в заметках здесь и здесь.

И теперь рассмотрим работу с балуном.

Давайте рассмотрим пример отображения балуна при клике на метке.

Код примера:

<!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; charset=utf-8" />
<title>Пример добавления метки и балуна, с использованием JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.315695,44.017063], // Нижний Новгород
                    zoom: 15
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.315695,44.017063], {
				balloonContent: 'Оперный театр'
				}	
			);
 
		// Добавление метки на карту
		myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В этом примере мы добавляем параметр balloonContent: ‘Оперный театр’.

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

Пример кода:

<!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; charset=utf-8" />
<title>Пример добавления балуна с заданием содержимого - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.315695,44.017063], // Нижний Новгород
                    zoom: 15
                });
 
				// Создание метки 
				var myPlacemark = new ymaps.Placemark(
				// Координаты метки
				[56.315695,44.017063], {
				balloonContentHeader: '<strong>Оперный театр</strong>',
				balloonContentBody: 'Содержимое <em>балуна</em>',
				balloonContentFooter: 'Подвал'
				}	
			);
 
		// Добавление метки на карту
		myMap.geoObjects.add(myPlacemark);
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В этом примере содержимое для заголовка задает параметр balloonContentHeader, balloonContentBody — задает основную часть и balloonContentFooter — нижнюю часть (подвал) балуна.

В следующем примере, рассмотрим как можно отобразить балун на карте без метки.

Код примера:

<!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; charset=utf-8" />
<title>Пример добавления балуна без метки, с использованием JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.315695,44.017063], // Нижний Новгород
                    zoom: 15
                });
 
 
			myMap.balloon.open(
				// Позиция балуна
				[56.315695,44.017063], {
				contentBody: 'Оперный театр'
			}, {
               // Опции балуна. В данном примере указываем, что балун не должен иметь кнопку закрытия.
                closeButton: false
        });				
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

Здесь мы определяем параметры для открытого балуна: позинию на карте, содержимое — contentBody: ‘Оперный театр’, а ткже задаем опцию для балуна — отсутствие кнопки закрытия closeButton: false

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

Пример кода:

<!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; charset=utf-8" />
<title>Пример задаем шаблон для балуна - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.317222,44.002149], 
                    zoom: 14
                });
 
			myPlacemarkOpera = new ymaps.Placemark([56.315695,44.017063], {
				name: 'Оперный театр',
				address: 'ул. Белинского, 59',
				websayt: 'www.operann.ru/'
 
			}),
 
			myPlacemarkDramma = new ymaps.Placemark([56.324117,44.00136], {
				name: 'Театр драмы',
				address: 'ул. Большая Покровская, д. 13',
				websayt: 'www.drama.nnov.ru'
 
			}),
 
			myPlacemarkKomedia = new ymaps.Placemark([56.320203,44.002321], {
				name: 'Нижегородский театр «Комедія»',
				address: 'ул. Грузинская, д. 23',
				websayt: 'comedia.nnov.ru'
 
			}),
 
			// Создаем коллекцию, в которую будем добавлять метки
                myCollection = new ymaps.GeoObjectCollection();
 
            //Добавляем метки в коллекцию геообъектов.
            myCollection
                .add(myPlacemarkOpera)
				.add(myPlacemarkDramma)
                .add(myPlacemarkKomedia);
 
            // Создаем шаблон для отображения контента балуна
            var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
                '<h3>$[properties.name]</h3>' +
                '<p><strong>Адрес:</strong> $[properties.address]</p>' +
                '<p><strong>Веб-сайт:</strong> <a rel="nofollow" href="http://$[properties.websayt]" target="_blank">перейти</a></p>'
            );
 
            // Помещаем созданный шаблон в хранилище шаблонов. Теперь наш шаблон доступен по ключу 'my#theaterlayout'.
            ymaps.layout.storage.add('my#theaterlayout', myBalloonLayout);
 
            // Задаем наш шаблон для балунов геобъектов коллекции.
            myCollection.options.set({
                balloonContentBodyLayout:'my#theaterlayout',
                // Максимальная ширина балуна в пикселах
                balloonMaxWidth: 300
            });
 
            // Добавляем коллекцию геообъектов на карту.
            myMap.geoObjects.add(myCollection);
 
 
 
 
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Посмотреть пример в действии

В начале мы задаем параметры для меток на карте.

Потом мы создаем коллекцию геообъектов myCollection и добавляем в нее наши метки.

После этого задаем шаблон для отображения контента балуна.

Добавляем созданный шаблон в хранилище и применяем его для нашей коллекции меток.

В самом конце добавляем коллекцию геообъектов на карту.

Еще один пример — создание макета балуна для полного изменения его внешнего вида.

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

Это можно сделать в любом графическом редакторе.

Теперь мы можем написать код для нашего примера:

<!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; charset=utf-8" />
<title>Пример балун со своим макетом - JavaScript API Яндекс.Карт 2.0</title>
<!-- Подключаем API  карт 2.x  -->
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
 
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            var myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [56.315695,44.017063], // Нижний Новгород
                    zoom: 16
                });
 
 
				// Создаем метку с изображением коалы
                myPlacemark = new ymaps.Placemark([56.315695,44.017063], {
                    // Контент балуна
                    balloonContent: '<div style = "margin-top: 30px; margin-left: 20px;" ><b>Оперный театр</b><br/>ул. Белинского, 59</div>'
                }, {
                     // Изображение иконки метки
                    iconImageHref: 'theater.png',
                    // Размеры изображения иконки
                    iconImageSize: [32, 37],  
					// смещение картинки
					iconImageOffset: [-16, -37],
                    // Размеры содержимого балуна
                    balloonContentSize: [130, 130],
                    // Задаем макет балуна - пользовательская картинка с контентом
                    balloonLayout: "default#imageWithContent",
                    // Картинка балуна
                    balloonImageHref: 'newbaloon.png',
                    // Смещение картинки балуна
                    balloonImageOffset: [-5, -60],
                    // Размеры картинки балуна
                    balloonImageSize: [150, 150],
                    // Балун не имеет тени
                    balloonShadow: false
                });
 
            // Добавляем метку на карту
            myMap.geoObjects.add(myPlacemark);
        }
    </script>
</head>
 
<body>
<div id="map" style="width:600px; height:400px"></div>
</body>
</html>

Здесь мы создаем макет балуна default#imageWithContent.

И параметры для содержимого балуна.

Посмотреть пример в действии

Загрузить архив с файлами примеров

Изучаем работу с балунами, используя API Яндекс.Карт версии 2.х: 23 комментария

  1. dobeerman

    Отличные статьи с примерами. А не могли бы вы опубликовать статью с описанием работы редактора геометрии? А то на офсайте все так скудно описано ((
    Спасибо

  2. Andrew

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

    Спасибище!

  3. Kel

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

  4. Владимир

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

    // <![CDATA[
    ymaps.ready(init);
    var myMap,
    myPlacemark;
    function init(){
    myMap = new ymaps.Map ("map", {
    center: [39.734976,54.627714],
    zoom: 14
    });
    myPlacemarkOpera = new ymaps.Placemark([39.734976,54.627714], {
    name: 'Тест',
    address: 'ул. Белинского, 59',
    websayt: 'www.ya.ru/'
    }),
    myCollection = new ymaps.GeoObjectCollection();
    myCollection
    .add(myPlacemarkOpera)
    var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
    '$[properties.name]’+
    Адрес: $[properties.address]’+
    Веб-сайт: перейти
    );
    ymaps.layout.storage.add(‘flatlayout’, myBalloonLayout);
    myCollection.options.set({
    balloonContentBodyLayout:’flatlayout’,
    balloonMaxWidth: 300
    });
    myMap.geoObjects.add(myCollection);
    }
    // ]]>

    1. admin Автор записи

      Все просто в этой точке максимальный уровень масштаба 7, а у Вас 14.

  5. Владимир

    Не понял, причем здесь масштаб. Исправлял на 7, все равно не работает.
    Мне кажется, что я напартачил где то в этой части
    myPlacemarkOpera = new ymaps.Placemark([39.734976,54.627714], {
    name: ‘Тест’,
    address: ‘ул. Белинского, 59’,
    websayt: ‘www.ya.ru/’
    }),
    myCollection = new ymaps.GeoObjectCollection();
    myCollection
    .add(myPlacemarkOpera)
    var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
    ‘$[properties.name]‘+
    ‘Адрес: $[properties.address]‘+
    ‘Веб-сайт: перейти‘
    );
    ymaps.layout.storage.add(‘flatlayout’, myBalloonLayout);
    myCollection.options.set({
    balloonContentBodyLayout:’flatlayout’,
    balloonMaxWidth: 300
    });
    myMap.geoObjects.add(myCollection);

  6. Владимир

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

  7. Кирилл

    Здравствуйте… А можно в балун добавить Картинку и одновременно текст… Я пробывал вставить… текст появляеться а как только прописываю картинку … карта пропадает…

  8. Владимир

    Добрый день! Подскажите, как в 4м примере задать меткам собственную картинку? Побывал после координат вставлять {
    iconImageHref: ‘http://webmap-blog.ru/files/gmap/gicon/mm_20_red.png’, // картинка иконки
    iconImageSize: [12, 20], // размеры картинки
    iconImageOffset: [-6, -10] // смещение картинки
    }, карта — работает, а метка не меняется.

  9. Владимир

    Реально сделать, чтобы для всех меток выводились хинты из поля name в балуне автоматически?

    1. admin Автор записи

      Можно сделать функцию, которая будет добавлять метки на карту. Входными параметрами она будет принимать параметры метки (название, описание координаты, стиль) и в ее коде прописать параметр hintText равный названию.

  10. Владимир

    Благодарю, что отвечаете! С хинтами разобрался по аналогии с балуном.

    Сори за офтоп, но просто писал уже здесь.
    Скажите, есть возможность, чтобы метка светилась другим цветом или как-то иначе изменяла свой внешний вид при наведении на нее курсора? (по аналогии с hover в сss)

  11. Евгений

    Спасибо!Отлично работает!
    А что нужно дописать, чтобы ещё появлялась панелька с + и — , всмысле приблизить и отдалить?

  12. Владимир

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

  13. Ксения

    ПОМОГИТЕ ПОЖАЛУЙСТА! Делаю сайт в подарок сестре, куда добавить
    balloonContentHeader: ‘Оперный театр‘,
    balloonContentBody: ‘Содержимое балуна‘,
    balloonContentFooter: ‘Подвал’

    в этот код?

    ymaps.ready(init);
    function init(){
    var geocoder = new ymaps.geocode(
    // Строка с адресом, который нужно геокодировать
    ‘Россия, Москва’,
    // требуемое количество результатов
    { results: 1 }
    );
    // После того, как поиск вернул результат, вызывается callback-функция
    geocoder.then(
    function (res) {
    // координаты объекта
    var coord = res.geoObjects.get(0).geometry.getCoordinates();
    var map = new ymaps.Map(‘map’, {
    // Центр карты — координаты первого элемента
    center: coord,
    // Коэффициент масштабирования
    zoom: 2,
    });
    // Добавление метки на карту
    map.geoObjects.add(res.geoObjects.get(0));
    // устанавливаем максимально возможный коэффициент масштабирования — 1
    map.zoomRange.get(coord).then(function(range){
    map.setCenter(coord, range[1] — 1)

    });
    // Добавление стандартного набора кнопок
    map.controls.add(‘mapTools’)
    // Добавление кнопки изменения масштаба
    .add(‘zoomControl’)
    // Добавление списка типов карты
    .add(‘typeSelector’);
    }

    );
    }

  14. Андрей

    Как поставить 3 балуна — понятно. А если надо поставить 30000? Если для каждой метки вызывать new ymaps.Placemark, то это сколько ждать придется… Есть-ли способ группового создания множества меток?

Добавить комментарий

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