Клуб API Карт

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

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 комментариев
Подписаться на комментарии к посту
В балун можно помещать любое 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
4 мая 2010, 15:46
Вот пример мне не понятен, потому как я не вижу куда ставить данные:
// Создание метки
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);
Вначале создайте необходимую верстку для балуна, например, вот такую:
название


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

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

Теперь создадим шаблон, в котором будет использоваться вышеприведенная верстка и изменяющиеся значения. Изменяющиеся значения будут заменены на переменные.
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
4 мая 2010, 16:21
да вот у меня пару примеров получилось из того что получила в "Умных" советах:
http://novostrojka.by/maps/index4.htm

Спасибо за участие! Сейчас буду пробовать потом выложу что плучилось!
novostrojka-by
4 мая 2010, 17:04
 
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);
не работает! наверное всетаки что-то напутала....(