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

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

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

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

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

ckudku.com

28 января 2016, 06:58

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

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);

чтобы добавить другой значок?

rodlex

28 января 2016, 06:58

http://api.yandex.ru/maps/jsapi/doc/dg/tasks/how-to-add-placemark.xml#how-to-create-custom-marker-icon

rodlex

28 января 2016, 06:58

http://api.yandex.ru/maps/jsapi/doc/dg/concepts/overlay_appearance.xml

ckudku.com

28 января 2016, 06:58

Да я так и сделал

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);

По идее нужно заменить строку которую я выделил жирным?

rodlex

28 января 2016, 06:58

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

// Базовый стиль
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" });

Я еще добавил стили в хранилище, чтобы к ним можно было обращаться по ключам. Это удобно особенно в тех случаях, когда нужно использовать стиль, который еще не создан.

ckudku.com

28 января 2016, 06:58

Вставил код и метка перестала отображаться http://ckudku.com/map.html

ckudku.com

28 января 2016, 06:58

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

Такое может быть?

rodlex

28 января 2016, 06:58

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

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