Как совместить стиль и setIconContent

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

yagolnik

18 июля 2009, 20:33

Столкнулся с проблемой:

Если прописываю стиль иконки, то setIconContent не работает.

Каким образом задать в стилях иконку для значка, и потом менять в ней содержимое, например, вставлять микро-фотографию?

Если пользоваться стандартным стилем, то он не растягивается по высоте картинки, а только по её ширине или по тексту.Причем текст и картинка должны быть без стилей {position: absolute;}.

Эта тема уже обсуждалась, например здесь:

http://clubs.ya.ru/mapsapi/replies.xml?item_no=3022

Но ответа нигде нет.

Если API не расчитан на совместное использование стилей и setIconContent, то неплохо бы это отразить в документации.

PS: Исправить частично положение можно используя дефолтный стиль (т.е. не определяя своего стиля) и таблицу в setIconContent. Но и тут таблица не должна иметь {position: absolute;}. Главный недостаток - очень большие внутренние границы и стандартной иконки. На маленьких изображениях половину площади съедает сама иконка.

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

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

rodlex

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

Если Вы меняете стиль для значка метки, то Вам необходимо самим позаботиться о добавлении контента в значок.

Создайте свой шаблон.

yagolnik

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

В шаблон не внесешь любое содержание. А только то, что можно извлечь из id, name и description. Например, о Flash можно забыть сразу.

rodlex

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

API Яндекс.Карт - очень гибкое. Например, Вы можете добавить в прототип Placemark новый метод, который будет задавать контент для значка.

Объявим новый стиль (он самый простой для демонстрации):

var s = new YMaps.Style();
s.iconStyle = new YMaps.IconStyle(
new YMaps.Template('$[iconContent]')
);

Пусть у нас будет метод setMyIconContent(), который будет задавать содержимое для значка метки. Добавим его в прототип:

YMaps.Placemark.prototype.setMyIconContent = function (content) {
this.iconContent = content;
this.update();
}

Важно. Лучше наследовать свой класс от Placemark и к нему добавить новый метод. О наследовании в JavaScript можно почитать здесь.

Далее необходимо создать метку с объявленным стилем, добавить ее на карту и вызвать метод setMyIconContent():

var placemark = new YMaps.Placemark(map.getCenter(), {style: s});
map.addOverlay(placemark);
placemark.setMyIconContent('Содержимое значка метки');

yagolnik

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

Больное спасибо! Как сделаю - выложу результат.

rodlex

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

С удовольствием посмотрим :)

rodlex

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

Лучше всего для метки определить свой Layout (макет), тогда можно будет воспользоваться стандартным методом setIconContent (что предпочтительнее). Макеты позволяют видоизменять внешний вид объектов на карте (например, меток или балунов).

function PlacemarkLayout () {
    var element = document.createElement('div');

    this.onAddToParent = function (parent) {
        parent.appendChild(element);
    }

    this.onRemoveFromParent = function (parent) {
        parent.removeChild(element);
    }

    this.update = function () {}

    this.setContent = function (content) {
        content.onAddToParent(element);
    }
}

var s = new YMaps.Style();
s.iconStyle = new YMaps.IconStyle(new YMaps.LayoutTemplate(PlacemarkLayout));

var placemark = new YMaps.Placemark(map.getCenter(), {style: s});
placemark.setIconContent('test');
map.addOverlay(placemark);

Fedor Golubev

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

только this.onRemoveFromParent = function (parent) { parent.removeChild(element); } заменить на this.onRemoveFromParent = function () { element.parentNode.removeChild(element); }