В этой заметке я продолжаю свой рассказ об особенностях использования 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.
И параметры для содержимого балуна.
Отличные статьи с примерами. А не могли бы вы опубликовать статью с описанием работы редактора геометрии? А то на офсайте все так скудно описано ((
Спасибо
Спасибо за статью очень помогла. Честно сказать решила мою проблему я даже не парился доступно легко. Вообщем побольше таких статей и мне ваще работать не прийдется только копи пастить)))
Спасибище!
Отличные, очень полезные статьи!
Все подробно и понятно. Абсолютно не разбираясь в программировании, собрал карту для сайта.
Огромное спасибо!
делал по вашему шаблону, но карта перестала грузиться, не подскажите в чем ошибка?
// <![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);
}
// ]]>
Все просто в этой точке максимальный уровень масштаба 7, а у Вас 14.
Не понял, причем здесь масштаб. Исправлял на 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);
у меня coordorder=longlat
если не трудно, скинте код из примера в блокноте на linkin62@mail.ru . Заранее спасибо.
Вот рабочий пример
Огромное спасибо! Без Вас не разобрался бы.
Выяснил , в чем была проблема изначально. Вордпресс съедал теги и получалась ошибка в коде.
теги переноса строки
Здравствуйте… А можно в балун добавить Картинку и одновременно текст… Я пробывал вставить… текст появляеться а как только прописываю картинку … карта пропадает…
Добрый день! Подскажите, как в 4м примере задать меткам собственную картинку? Побывал после координат вставлять {
iconImageHref: ‘http://webmap-blog.ru/files/gmap/gicon/mm_20_red.png’, // картинка иконки
iconImageSize: [12, 20], // размеры картинки
iconImageOffset: [-6, -10] // смещение картинки
}, карта — работает, а метка не меняется.
Реально сделать, чтобы для всех меток выводились хинты из поля name в балуне автоматически?
Можно сделать функцию, которая будет добавлять метки на карту. Входными параметрами она будет принимать параметры метки (название, описание координаты, стиль) и в ее коде прописать параметр hintText равный названию.
Благодарю, что отвечаете! С хинтами разобрался по аналогии с балуном.
Сори за офтоп, но просто писал уже здесь.
Скажите, есть возможность, чтобы метка светилась другим цветом или как-то иначе изменяла свой внешний вид при наведении на нее курсора? (по аналогии с hover в сss)
Есть пример Изменение значка метки при наведении
Спасибо!Отлично работает!
А что нужно дописать, чтобы ещё появлялась панелька с + и — , всмысле приблизить и отдалить?
Подскажите, есть у Вас на сайте примеры, где создаются и подключаются собственные стили для балунов или хинтов? нужно изменить внешний вид хинтов через css.
На блоге такого нет, но есть в примерах на сайте API Яндекс.Карт — Задание собственного шаблона всплывающей подсказки
ПОМОГИТЕ ПОЖАЛУЙСТА! Делаю сайт в подарок сестре, куда добавить
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’);
}
);
}
Как поставить 3 балуна — понятно. А если надо поставить 30000? Если для каждой метки вызывать new ymaps.Placemark, то это сколько ждать придется… Есть-ли способ группового создания множества меток?