Клуб API Карт

Как связать метку и балун?

Пост в архиве.
ckudku.com
23 октября 2010, 17:13

Здравствуйте! Как связать метку и балун?

То есть, чтобы вместо обычного значка стаял мой и открывался балун который уже есть http://ckudku.com/map.html

Вот код нового значка:

var s = new YMaps.Style();

s.iconStyle = new YMaps.IconStyle();

s.iconStyle.href = "img_1_10_352.png";

s.iconStyle.size = new YMaps.Point(31, 42);

s.iconStyle.offset = new YMaps.Point(-16, -42);

var placemark = new YMaps.Placemark(map.getCenter(37.546172,47.098124), {style: s});

map.addOverlay(placemark);

А вот этот старого значка и содержимого балуна:

var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.546172,47.098124), {
style: {
parentStyle : "default#barberShopIcon",
balloonContentStyle : {
template : new YMaps.Template(
'<img style="float:left;padding-right:0.8em" src="http://ckudku.com/mariupol/images/image17.png" alt=""/>\
<div style="float:left">\
<ul style="padding:0;margin-top:0em;list-style:none">\
<li><b><font class="ws12" face="Trebuchet MS">Название предприятия</b>$[metaDataProperty.name]</li>\
<li><b><font class="ws12" face="Trebuchet MS">Адрес:</b>$[metaDataProperty.address]</li>\
<li><b><font class="ws12" face="Trebuchet MS">Телефон:</b>$[metaDataProperty.phone]</li>\
<br><li><font class="ws12" face="Trebuchet MS"><a class="iframe" href="http://driverlab.ru/" onclick="$.fancybox(this);return false;"><font color="#208bc0">Обзор</a><span> <font color="#000000">| </span><span><a class="iframe" href="http://3dmariupol.com.ua/mariupol/amstor1/" onclick="$.fancybox(this);return false;"><font color="#208bc0">Перейти на сайт >></a></li>\
</ul>\
</div>'
)
}
}
});
placemark.metaDataProperty = {
address : " ул. Варганова, 2",
phone : " (0629) 34-92-73"
};
map.addOverlay(placemark);

8 комментариев
И как нужно изменять этот код

var s = new YMaps.Style();
s.iconStyle = new YMaps.IconStyle();
s.iconStyle.href = "img_1_10_352.png";
s.iconStyle.size = new YMaps.Point(31, 42);
s.iconStyle.offset = new YMaps.Point(-16, -42);
var placemark = new YMaps.Placemark(map.getCenter(37.63731,47.131772), {style: s});map.addOverlay(placemark);

 чтобы добавить другой значок?
Да я так и сделал



var baseStyle = new YMaps.Style();
baseStyle.iconStyle = new YMaps.IconStyle();
baseStyle.iconStyle.offset = new YMaps.Point(-16, -42);
baseStyle.iconStyle.size = new YMaps.Point(31, 42);

var styleFootBall = new YMaps.Style(baseStyle);
styleFootBall.iconStyle = new YMaps.IconStyle();
styleFootBall.iconStyle.href = "img_1_10_352.png";
var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.546172,47.098124), {style: styleFootBall});
map.addOverlay(placemark);



Только  не понимаю как связать эту метку с балуном который уже есть:


var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.546172,47.098124), {
    style: {
        parentStyle : "default#barberShopIcon",
        balloonContentStyle : {
            template : new YMaps.Template(
                'http://ckudku.com/mariupol/images/image17.png" alt=""/>\
                \
                    
    \

                        
  • Название предприятия$[metaDataProperty.name]
  • \
                            
  • Адрес:$[metaDataProperty.address]
  • \
                            
  • Телефон:$[metaDataProperty.phone]
  • \
                            
  • http://driverlab.ru/" onclick="$.fancybox(this);return false;">Обзор | http://3dmariupol.com.ua/mariupol/amstor1/" onclick="$.fancybox(this);return false;">Перейти на сайт >>
  • \
                        \
                    '
                )
            }
        }
    });
    placemark.metaDataProperty = {
        address : " ул. Варганова, 2",
        phone : " (0629) 34-92-73"
    };
    map.addOverlay(placemark);


    По идее нужно заменить строку которую я выделил жирным?
    Стили можно создавать с помощью конструктором или хешей, лучше придерживаться одного способа, чтобы не возникало путанницы. Давайте сделаем все с помощью хэшей (это короче):

    // Базовый стиль
    YMaps.Styles.add("my#base", {
        // Стиль значка метки   
        iconStyle : {
            offset : new YMaps.Point(-16, -42),
            size : new YMaps.Point(31, 42)
        }, 

        // Стиль содержимого балуна
        balloonContentStyle : {
            template : new YMaps.Template(
                'http://ckudku.com/mariupol/images/image17.png" alt=""/>\
                \
                   
      \
                         
    • Название предприятия$[metaDataProperty.name]
    • \
                         
    • Адрес:$[metaDataProperty.address]
    • \
                         
    • Телефон:$[metaDataProperty.phone]
    • \
                         
    • http://driverlab.ru/" onclick="$.fancybox(this);return false;">Обзор | http://3dmariupol.com.ua/mariupol/amstor1/" onclick="$.fancybox(this);return false;">Перейти на сайт >>
    • \
                     
    \
                '
            )  
        }  
    });

    // Конкретный стиль
    YMaps.Styles.add("my#footbal", {
        iconStyle : {
            href : "img_1_10_352.png"
        }  
    });                                                                                                                                                                               

    var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.546172,47.098124), { style : "my#footbal" });

    Я еще добавил стили в хранилище, чтобы к ним можно было обращаться по ключам. Это удобно особенно в тех случаях, когда нужно использовать стиль, который еще не создан.
    Вставил код и метка перестала отображаться http://ckudku.com/map.html
    Заработало только после того как убрал
    // Базовый стиль
    YMaps.Styles.add("my#base", {
        // Стиль значка метки    
        iconStyle : { 
            offset : new YMaps.Point(-16, -42),
            size : new YMaps.Point(31, 42) 
        },  


    Такое может быть?
    Я в очередной раз допустил ошибку)
    Нужно отнаследовать конкретный стиль от базового

    // Конкретный стиль
    YMaps.Styles.add("my#footbal", {
        parentStyle : "my#base",
        iconStyle : {
            href : "img_1_10_352.png"
        }  
    })