Как сделать балун с описанием и фоткой?

Пост в архиве.

novostrojka-by

3 мая 2010, 12:44

Есть группа объектов:

// Группы объектов
var groups = [
createGroup("Жилые дома", [
createPlacemark(new YMaps.GeoPoint(27.609945,53.944076), "АРЭСА на Олешева"),
createPlacemark(new YMaps.GeoPoint(27.592527,53.923594), "АРЭСА на Сурганова"),
createPlacemark(new YMaps.GeoPoint(27.589589,53.93126), "ЖК ПРЕСТИЖ")
], "default#redPoint"),
createGroup("Коммерческие помещения", [
createPlacemark(new YMaps.GeoPoint(27.520387,53.905473), "Бизнес центр SILVER TOWER"),
createPlacemark(new YMaps.GeoPoint(27.512091,53.883882), "Новая Грушевка"),
], "default#greenPoint"),
];

как сделать чтобы балун открывался с описанием объекта, линком и фоткой?

Есть пример?

6 комментариев

Авторизуйтесь, чтобы оставить комментарий

Andrey.Cjkjvfnby

28 января 2016, 07:33

Стили, шаблоны
http://clubs.ya.ru/mapsapi/replies.xml?item_no=7058
http://clubs.ya.ru/mapsapi/replies.xml?item_no=6401

rodlex

28 января 2016, 07:33

В балун можно помещать любое html-содержимое, т. е. вы можете написать вот так:

createPlacemark(new YMaps.GeoPoint(27.609945,53.944076), "Имя", "Описание")

Но лучше последовать совету Андрея Соломатина и сделать шаблон:

YMaps.Styles.add("my#balloon", {
balloonContentStyle : {
template : new YMaps.Template('http://mysite.ru/images/$[id].jpg">$[description]')
}
});

// Создание метки
function createPlacemark (point, name, description, imgID) {
var placemark = new YMaps.Placemark(point, { style : "my#balloon" });

placemark.id = imgID;
placemark.name = name;
placemark.description = description;

return placemark
}

Тогда в функцию createPlacemark нужно будет передать еще третий параметр - имя картинки.

createPlacemark (new YMaps.GeoPoint(27.609945,53.944076), "имя", "описание", 23);

В этом случае у созданной метки в балуне будет содержаться следующее:

http://mysite.ru/images/23.jpg">описание

novostrojka-by

28 января 2016, 07:33

Вот пример мне не понятен, потому как я не вижу куда ставить данные:
// Создание метки
function createPlacemark (point, name, description, imgID) {
var placemark = new YMaps.Placemark(point, { style : "my#balloon" });

placemark.id = imgID; - эти поля менять? на что? просто номер?
placemark.name = name; - тут ясно что название
placemark.description = description; - и тут описание

return placemark
}

Вот что у меня получилось:
http://novostrojka.by/maps/index3.htm
теперь вопрос как сделать в балуне "красивое расположение", название сверху, картинка слева, в текст справа от картинки, пару строк, и линк под картинкой?

Пример отображения балуна
НАЗВАНИЕ

|----------------| Адрес:
| | Телефон:
| | Описание:
| |
| |
| |
| |
|----------------|

Линк

Вот код для двух балунов:

var point001 = new YMaps.GeoPoint(27.609945,53.944076);
var placemark001 = new YMaps.Placemark(point001, {style: s});
placemark001.setBalloonContent(' АРЭСА на Олешева
Адрес: ул. Олешева-Логойский тракт

АРЭСА на Олешева'); map.addOverlay(placemark001);

var point002 = new YMaps.GeoPoint(27.592527,53.923594);
var placemark002 = new YMaps.Placemark(point002, {style: s});
placemark002.setBalloonContent('АРЭСА на Сурганова
Адрес: ул. Сурганова

АРЭСА на Сурганова'); map.addOverlay(placemark002);

rodlex

28 января 2016, 07:33

Вначале создайте необходимую верстку для балуна, например, вот такую:

название

адрес
телефон
описание

подробнее

Для каждого объекта будут меняться следующие параметры:

название
адрес картинки
адрес
телефон
описание
ссылка на информацию

Теперь создадим шаблон, в котором будет использоваться вышеприведенная верстка и изменяющиеся значения. Изменяющиеся значения будут заменены на переменные.

var template = new YMaps.Teamplate('$[name]\
      \
      \
          $[metaDataProperty.address]\
          $[metaDataProperty.phone]\
          $[description]\
      \
      $[metaDataProperty.more]');

Создадим стиль, использующий написанный шаблон и добавим его в хранилище:

YMaps.Styles.add("my#style", {
balloonContentStyle : {
template : template
}
});

Теперь к этому стилю можно обращаться по ключу my#style.

Модифицируем функцию createPlacemark, чтобы она стала принимать геоточку и нужный набор параметров:

function createPlacemark (point, content) {
var placemark = new YMaps.Placemark(point, { style : "my#style" });

placemark.name = content.name;
placemark.description = content.description;
placemark.metaDataProperty = {
      url : content.url,
      address : content.address,
      phone : content.phone,
      more : content.more
}

return placemark
}

Теперь создаем метку так:

var placemark = createPlacemark(new YMaps.GeoPoint(27.609945,53.944076), {
name : "Новостройка",
description : "АРЭСА на Олешева ",
url : "http://novostrojka.by/upload/pic/mini/1_kvo26c5m7z.jpg",
address : "ул. Олешева-Логойский тракт",
phone : "777-77-77"
more : "http://yandex.ru/"
});

Ну и не забыдь добавить метку на карту:

map.addOverlay(placemark);

Более подробную информацию по шаблонам вы можете найти в комментарии Андрея.

novostrojka-by

28 января 2016, 07:33

да вот у меня пару примеров получилось из того что получила в "Умных" советах:
http://novostrojka.by/maps/index4.htm

Спасибо за участие! Сейчас буду пробовать потом выложу что плучилось!

novostrojka-by

28 января 2016, 07:33

YMaps.jQuery(function () {
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
map.setCenter(new YMaps.GeoPoint(27.59499,53.902646), 12);
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.ScaleLine());
map.addControl(new YMaps.SearchControl()); //поиск по карте
map.addCopyright('Новостройки Беларуси'); //Копирайт
var s = new YMaps.Style();
s.iconStyle = new YMaps.IconStyle();
s.iconStyle.href = "http://novostrojka.by/maps/nmi.png";
s.iconStyle.size = new YMaps.Point(15, 15);
var sk = new YMaps.Style();
sk.iconStyle = new YMaps.IconStyle();
sk.iconStyle.href = "http://novostrojka.by/maps/nki.png";
sk.iconStyle.size = new YMaps.Point(25, 25);
//стиль шаблона
YMaps.Styles.add("my#style", {
balloonContentStyle : {
template : template
}
});

//шаблон
var template = new YMaps.Teamplate('$[name]\
\
\
$[metaDataProperty.address]\
$[metaDataProperty.phone]\
$[description]\
\
Подробнее>');
//стиль шаблона
YMaps.Styles.add("my#style", {
balloonContentStyle : {
template : template
}
});

var placemark = createPlacemark(new YMaps.GeoPoint(27.609945,53.944076), {
name : "Новостройка",
description : "АРЭСА на Олешева ",
url : "http://novostrojka.by/upload/pic/mini/1_kvo26c5m7z.jpg",
address : "ул. Олешева-Логойский тракт",
phone : "777-77-77"
more : "http://yandex.ru/"
});
map.addOverlay(placemark);

не работает! наверное всетаки что-то напутала....(