Войти
Войти
Собственный html-контент балуна метки
Сохранить как файлыЭкспорт на JSFiddle
\n\n","balloon_html.js":"ymaps.ready(init);\n\nfunction init() {\n var myMap = new ymaps.Map('map', {\n center: [55.751574, 37.573856],\n zoom: 9,\n controls: []\n }, {\n searchControlProvider: 'yandex#search'\n });\n\n var placemark = new ymaps.Placemark(myMap.getCenter(), {\n // Зададим содержимое заголовка балуна.\n balloonContentHeader: 'Рога и копыта
' +\n 'Сеть кинотеатров',\n // Зададим содержимое основной части балуна.\n balloonContentBody: '![](\"img/cinema.jpg\")
' +\n '+7 (123) 456-78-90
' +\n 'Ближайшие сеансы
Сеансов нет.',\n // Зададим содержимое нижней части балуна.\n balloonContentFooter: 'Информация предоставлена:
OOO \"Рога и копыта\"',\n // Зададим содержимое всплывающей подсказки.\n hintContent: 'Рога и копыта'\n });\n // Добавим метку на карту.\n myMap.geoObjects.add(placemark);\n // Откроем балун на метке.\n placemark.balloon.open();\n}"},"resources":["img/cinema.jpg"],"directory":"https://sandbox.api.maps.yandex.net/examples/ru/2.1/balloon_html/"}
' +\n 'Сеть кинотеатров',\n // Зададим содержимое основной части балуна.\n balloonContentBody: '
' +\n '+7 (123) 456-78-90
' +\n 'Ближайшие сеансы
Сеансов нет.',\n // Зададим содержимое нижней части балуна.\n balloonContentFooter: 'Информация предоставлена:
OOO \"Рога и копыта\"',\n // Зададим содержимое всплывающей подсказки.\n hintContent: 'Рога и копыта'\n });\n // Добавим метку на карту.\n myMap.geoObjects.add(placemark);\n // Откроем балун на метке.\n placemark.balloon.open();\n}"},"resources":["img/cinema.jpg"],"directory":"https://sandbox.api.maps.yandex.net/examples/ru/2.1/balloon_html/"}
Пишете на JavaScript? У нас есть вакансии
Через свойства и опции геообъектов можно задавать содержимое для балуна и всплывающей подсказки, а также изменять их внешний вид.
Содержимое балуна/всплывающей подсказки задается через свойства геообъекта:
- hintContent - содержимое всплывающей подсказки геообъекта;
- balloonContent - содержимое балуна геообъекта;
- balloonContentHeader - содержимое заголовка балуна геообъекта;
- balloonContentBody - содержимое основой части балуна геообъекта;
- balloonContentFooter - содержимое нижней части балуна геообъекта.
При задании содержимого можно использовать HTML-разметку.Обратите внимание, через HTML-разметку можно задать только внутреннюю структуру балуна/всплывающей подсказки. Если нужно изменить их внешний вид, вам потребуется переопределить их макет с помощью фабрики templateLayoutFactory. Макет задается через опции геообъекта.
Фабрика макетов позволяет решить задачи:
- поменять форму балуна и всплывающей подсказки;
- сдвинуть относительно метки;
- изменить внешний вид крестика закрытия балуна;
- изменить внешний вид ножки балуна и др.
Чтобы понять, как работать с фабрикой макетов, посмотрите пример Пользовательский макет балуна с поддержкой автопозиционирования.